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

正确导入后，ion-list中的app.component.html应该工作per the docs。 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. 以相同的“资产”级别复制/ src中的node_modules / @ ionic / core / dist / ionic文件夹
4. 通过将以下行添加到angular-cli.json文件中，告诉Angular Cli在服务和/或构建时将此文件夹视为可导出文件夹：
```
"assets": [ 
    "ionic",
    ...
],
```

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

希望对您有帮助！

在非离子（Angular 6）应用中使用@ ionic / core而没有unpkg CDN

1 个答案: