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

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

0 голосов
/ 08 февраля 2019

Я новичок в 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?

1 Ответ

0 голосов
/ 27 февраля 2019

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

С @ionic/pwa-elementsявляются веб-компонентами Stencil, их можно включить в проект Ionic 4 + Angular с помощью процесса, описанного в Угловая интеграция с 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"
              },
/* ... */

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

...