cytoscape.js 和 Angular6

cytoscape.js and Angular6

我想在我的 angular 项目中导入 cytoscape.js 库，但我不知道该怎么做。据我所知angular没有官方的cytoscape模块，有没有办法手动导入cytoscape？

更新：请参阅 D.C 的回答。 Joo，这应该是公认的答案。

其实在Angular中引入JS库是没有问题的，我就是这样用npm和Angular6:

  1. 运行 npm install cytoscape
  2. 从 https://github.com/cytoscape/cytoscape.js/blob/master/dist/cytoscape.min.js
    3. 下载 Cytoscape
  3. 在您的 Angular 根目录中创建目录 scripts 并将下载的文件放在那里

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

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

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

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

Philipp 的答案确实有效，但它看起来像是使用 npm install 和实际 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({...})