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

Question

我是 Ionic4 的新手，但已经使用 Angular 一段时间了，所以目前正在试验 Ionic4/Angular 应用程序。

我一直在寻求集成电容器以从 PWA 访问本机功能，并且我已经对相机插件进行了一些测试，但是我必须在我的脚本中包含对外部 pwa-elements 脚本的引用index.html 根据：https://capacitor.ionicframework.com/docs/getting-started/pwa-elements/

如果我希望该应用程序能够离线工作，这是不好的，所以我试图将其导入并捆绑在 Ionic/Angular 构建中，但文档中不清楚如何在 Angular 上下文中执行此操作。

我添加了“导入‘@ionic/pwa-elements’；”到我的 app.module.ts，但这似乎不起作用（我刚得到 this issue）。我尝试在我的 angular.json 文件的脚本部分手动引用 ionicpwaelements.js 脚本，但是 ionicpwaelements.js 引用了节点模块中 'ionicpwaelements' 子目录中的一堆其他 js 文件，它无法找到（并且将它们全部引用起来太费力了）。

如何将 ionic/pwa-elements 导入 Ionic4/Angular 应用程序？

Answer 1

我想你已经在 Github thread 上看到了我的回答，但是 post 在这里是为了其他不想浏览该主题的人：

由于 @ionic/pwa-elements 是 Stencil 网络组件，它可以通过 Angular integration with 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"
              },
/* ... */

Ionic Modals 被破坏也发生在 index.html 中的外部脚本引用中，因此这似乎是一个尚未解决的 separate issue。

Answer 2

感谢您提出这个问题，我挣扎了将近 2 个小时。

在我的例子中，问题是导入命令，需要像这样：

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

直到它的加载器路径。

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

How to include @ionic/pwa-elements in an Ionic4/Angular build

ionic-framework

progressive-web-apps

angular

ionic4

capacitor