2

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

我一直在寻找集成电容器以从 PWA 访问本机功能，并且我已经对相机插件进行了一些测试，但是我必须在我的 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 应用程序？

4

2 回答 2

4

我想你已经在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 以在构建时包含这些资产：

角.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 中的外部脚本引用中，因此这似乎是一个尚未解决的单独问题。

于 2019-02-27T16:42:49.443 回答
0

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

在我的情况下，问题是导入命令，它需要像：

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

直到它的加载器路径。

于 2020-05-27T15:02:04.493 回答