如何在 Ionic4/Angular 構建中包含 @ionic/pwa-elements

Question

我是 Ionic4 的新手，但已經使用 Angular 一段時間了，所以我目前正在試驗 Ionic4/Angular 應用程序。

我一直在尋找集成電容器以從 PWA 訪問本機功能，並且我已經使用相機插件進行了一些測試，但是我必須按照我的 index.html 在我的 index.html 中包含對外部 pwa-elements 腳本的引用： https : //capacitor.ionicframework.com/docs/getting-started/pwa-elements/

如果我希望應用程序能夠離線工作，這不好，所以我試圖將其導入並捆綁在 Ionic/Angular 構建中，但文檔中不清楚如何在 Angular 上下文中執行此操作。

我添加了“import '@ionic/pwa-elements';” 到我的 app.module.ts，但這似乎不起作用（我剛收到這個問題）。 我已經嘗試在我的 angular.json 文件的腳本部分手動引用 ionicpwaelements.js 腳本，但是 ionicpwaelements.js 引用了節點模塊中“ionicpwaelements”子目錄中的一堆其他js文件，它找不到（並且將它們全部引用太難了）。

如何將 ionic/pwa-elements 導入 Ionic4/Angular 應用程序？

Answer 1

我想您已經在Github 線程上看到了我的回答，但會將其發布在這里供其他不想篩選該線程的人使用：

由於@ionic/pwa-elements是 Stencil Web 組件，因此可以通過Angular 與 Stencil 集成中概述的過程將其包含在 Ionic 4 + Angular 項目中：

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';

直到它的加載器路徑。