Используйте @ ionic / core без unpkg cdn в неионном (Angular 6) приложении

Question

Я пытаюсь использовать компоненты в пакете @ionic/core в приложении Angular 6.(это не приложение CLI, и я не могу использовать @ionic/angular).

Я не могу заставить компоненты работать без импорта напрямую из cdn, т.е.

<link href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" rel="stylesheet">

<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>

Я добавил@ionic/core в качестве зависимости npm, и пытался импортировать ее в разные стороны, но не может заставить компоненты отображаться.

Вот редактор Stackblitz: https://stackblitz.com/edit/angular-34cilj

The ion-list в app.component.html должны работать в соответствии с документами при правильном импорте.В app.module.ts

есть некоторые комментарии по импорту

Answer 1

Спасибо за освещение, это именно то, что я хотел.Вот что я сделал, чтобы заставить его работать:

• Решение 1: как он работал для меня, импортировав эти библиотеки в файл index.html вашего проекта Stackblitz (я сохранил файл в Stackblitzтак что вы можете проверить), я сделал то же самое в моем угловом файле src / index.html и тоже работал.Проблема в том, что я не хочу иметь проект с внешними зависимостями CDN, поэтому я создал второе решение.

• Решение 2: использовать его локально:

  1. Установить ионный сердечник с:

     npm install @ionic/core --save
     

  2. Добавьте эти строки в файл vendor.ts (этот файл импортируется из main.ts для чистоты, но он также действителен, если эти строки импортированы непосредственно в main.ts):

     import "../node_modules/@ionic/core/css/ionic.bundle.css";
     import "../node_modules/@ionic/core/dist/ionic.js";
     

     или, если эти файлы расположены по другому пути, например, в / src /

     import "./ionic.bundle.css";
     import "./ionic.js";
     

  3. Скопируйте папку node_modules / @ ionic / core / dist / ionic в / src, втот же уровень "assets"

  4. Скажите Angular Cli рассматривать эту папку как экспортируемую папку при обработке и / или построении, добавив эту строку в файл angular-cli.json:

     "assets": [ 
         "ionic",
         ...
     ],
     

Я подумываю создать новый скрипт в package.json для копирования папки "ionic" в / src после того, как пакет @ ionic /Ядро обновляется с помощью npm, но я не думаю, что это необходимо, и я всегда удаляю ~ char для каждого пакета, чтобы npm не мог сломать мой проект.

Надеюсь, это поможет!