cytoscape.js和Angular6

Question

我想在我的角度项目中导入cytoscape.js库，但是我不知道该怎么做。据我所知，目前还没有官方的角度cytoscape模块，有什么方法可以手动导入cytoscape吗？

Answer 1

更新：请参阅 DC Joo 的答案，这应该是公认的答案。

实际上，在 Angular 中导入 JS 库是没有问题的，这就是我使用 npm 和 Angular6 的方法：

1. 跑步npm install cytoscape
2. 从以下位置下载 Cytoscapehttps://github.com/cytoscape/cytoscape.js/blob/master/dist/cytoscape.min.js
3. 在 Angular 根目录中创建一个目录scripts并将下载的文件放在那里

4. 将您下载的脚本包含在您的angular.json：

   "projects": { "myproject": { ... "architect": { "build": { ... "scripts": [ "src/scripts/cytoscape.min.js" ] ... （注意：抱歉关于格式，我尝试过，但它不想工作）

5. 在要使用 Cytoscape 的 Angular 组件中，添加declare var cytoscape: any;到导入

现在您可以像平常一样使用 Cytoscape，玩得开心:)

Answer 2

Philipp的答案实际上是有效的，但看起来好像不正确地包含了同时使用npm installAND实际JS文件的库。您可以npm install从说明中跳过该步骤，它的工作原理相同。要实际使用npm安装的软件包，我建议以下几点：

1. 跑 npm install cytoscape
2. 运行npm install --save @types/cytoscape以获取正确的IDE提示。
3. 在您的组件中添加 import * as cytoscape from 'cytoscape';
4. 像预期的那样使用它，例如 let cy = cytoscape({...})