在非Ionic(Angular 6)应用程序中使用@ionic/核心而不使用unpkg cdn

我正在尝试在 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应该按照文档工作。app.module.ts中有一些注释的导入尝试

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

解决方案 1：因为它通过在 Stackblitz 项目的索引.html文件中导入这些库对我有用(我将文件保存在 Stackblitz 中以便您可以检查(，所以我在我的角度 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. 复制/src 中的文件夹 node_modules/@ionic/core/dist/ionic 在相同的"资产"级别
4. 告诉 Angular Cli 在服务和/或构建时将此文件夹视为可导出的文件夹，方法是将以下行添加到 angular-cli.json 文件中：
```
"assets": [ 
"ionic",
...
],
```

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

我希望它有所帮助！

相关内容

最新更新

热门标签：