在非 Ionic (Angular 6) 应用程序中使用 @ionic/core 而无需 unpkg cdn

Question

@ionic/core我正在尝试在 Angular 6 应用程序中使用包中的组件。（它不是 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

ion-list正确导入后，中的app.component.html应该按照文档工作。有一些评论的导入尝试app.module.ts

Answer 1

谢谢你的启发，这正是我想要的。这就是我为使其发挥作用所做的事情：

• 解决方案 1：因为它通过在 Stackblitz 项目的 index.html 文件中导入这些库（我将文件保存在 Stackblitz 中以便您可以检查）对我有用，所以我在我的 Angular src/index.html 文件中做了同样的事情并且也工作了。问题是我不想让项目依赖外部 CDN，所以我创建了第二个解决方案。

• 解决方案2：本地使用：

  1. 安装离子核心：

     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，但我认为这是不必要的，而且我总是删除 ~ char 到每个包以确保 npm 不会破坏我的项目。

我希望它有帮助！