angular - 在非 ionic (Angular 6)应用程序中使用不带 unpkg cdn 的 @ionic/core

Question

我正在尝试在 Angular 6 应用程序中使用 @ionic/core 包中的组件。 (它不是 CLI 应用程序，我不能使用 @ionic/angular)。

如果不直接从 cdn 导入，我无法让组件工作，即

<link href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" rel="stylesheet">

<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>

我已经将 @ionic/core 添加为 npm 依赖项，并尝试以各种方式导入它，但无法让组件呈现。

这是 Stackblitz 编辑:https://stackblitz.com/edit/angular-34cilj

app.component.html 中的 ion-list 应该可以工作 per the docs正确导入时。 app.module.ts

中有一些注释的导入尝试

Answer 1

感谢您的照明，这正是我想要的。这就是我为使其工作所做的工作:

• 解决方案 1:因为它通过在 Stackblitz 项目的 index.html 文件中导入这些库对我有效(我将文件保存在 Stackblitz 中以便您查看)，我在我的 angular src/index 中做了同样的事情.html 文件，也有效。问题是我不想让项目依赖外部 CDN，所以我创建了第二个解决方案。

• 解决方案 2:在本地使用它:

  1. 安装 ionic 核心:

     npm install @ionic/core --save
     

  2. 将这些行添加到 vendor.ts 文件(为了干净起见，我从 main.ts 导入了这个文件，但是如果这些行直接导入到 main.ts 中也是有效的):

     import "../node_modules/@ionic/core/css/ionic.bundle.css";
     import "../node_modules/@ionic/core/dist/ionic.js";
     

     或者，如果您将这些文件放在另一个路径中，例如在/src/

     import "./ionic.bundle.css";
     import "./ionic.js";
     

  3. 将文件夹node_modules/@ionic/core/dist/ionic复制到/src中，与“assets”同级

  4. 通过将此行添加到 angular-cli.json 文件中，告诉 Angular Cli 在服务和/或构建时将此文件夹视为可导出文件夹:

     "assets": [ 
         "ionic",
         ...
     ],
     

我正在考虑在 package.json 中创建一个新脚本，用于在 npm 升级 @ionic/core 包后将“ionic”文件夹复制到/src，但我认为这不是必需的，而且我总是删除每个包的 ~ 字符，以确保 npm 不会破坏我的项目。

希望对您有所帮助!