Как включить @ionic/pwa-elements в сборку Ionic4/Angular

Question

Я новичок в Ionic4, но уже некоторое время использую Angular, поэтому в настоящее время экспериментирую с приложением Ionic4/Angular.

Я пытался интегрировать конденсатор для доступа к встроенным функциям из PWA, и у меня есть несколько тестов, работающих с плагином камеры, однако я должен включить ссылку на внешний скрипт pwa-elements в моем index.html согласно: https://capacitor.ionicframework.com/docs/getting-started/pwa-elements/

Это бесполезно, если я хочу, чтобы приложение могло работать в автономном режиме, поэтому я пытаюсь импортировать и связать его в сборке Ionic / Angular, но из документации не ясно, как это сделать в контексте Angular.

Я добавил "import '@ ionic / pwa-elements';" в мой app.module.ts, но, похоже, это не сработало (я просто понял эту проблему). Я пытался вручную ссылаться на скрипт ionicpwaelements.js в разделе сценариев моего файла angular.json, но ionicpwaelements.js ссылается на кучу других js-файлов в подкаталоге "ionicpwaelements" в модулях узла, которые он не может найти (и было бы слишком трудно ссылаться на них всех).

Как импортировать ионные элементы / pwa-элементы в приложение Ionic4/Angular?

Answer 1

Я думаю, что вы уже видели мой ответ в ветке Github, но опубликую его здесь для всех, кто не хочет просеивать эту ветку:

поскольку @ionic/pwa-elements являются веб-компонентами Stencil, их можно включить в проект Ionic 4 + Angular с помощью процесса, описанного в Angular Integration с Stencil:

SRC / main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineCustomElements } from '@ionic/pwa-elements/dist/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

defineCustomElements(window);

Компонент CameraModal использует несколько файлов SVG для значков и соседних сценариев. angular.json может быть изменен для включения этих ресурсов в сборку:

angular.json

/* ... */
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            /* ... */
            "assets": [
              {
                "glob": "**/*.svg",
                "input": "node_modules/@ionic/pwa-elements/dist/ionicpwaelements/icons",
                "output": "icons"
              },
              /*** Including the scripts below breaks Ionic Modals, but without them, you'll get a 404 error ***/
              {
                "glob": "**/*.js",
                "input": "node_modules/@ionic/pwa-elements/dist/ionicpwaelements",
                "output": "ionicpwaelements"
              },
/* ... */

Нарушение ионных модалов происходит и с внешней ссылкой на скрипт в index.html, так что, похоже, это отдельная проблема, которая еще не решена.

Answer 2

Спасибо, что разместили этот вопрос. Я боролся почти 2 часа.

В моем случае проблема заключалась в команде импорта, которая должна быть такой:

import { defineCustomElements } from '@ionic/pwa-elements/loader';

до пути его загрузчика.