Question

我正在尝试在Angular 8中实现cytoscape扩展

npm安装cytoscape-edge-editing Cytoscape工作正常。

1.app.ts

import * as cytoscape from 'cytoscape';
import * as edgeBendEditing from 'cytoscape-edge-editing';
import * as jquery from 'jquery';


let cytoscape = require('cytoscape');
let jquery = require('jquery');
let edgeBendEditing = require('cytoscape-edge-editing');

edgeBendEditing( cytoscape, jquery );
cytoscape.use(edgeBendEditing);

angular.json

     "scripts": [
              "node_modules/cytoscape/dist/cytoscape.min.js",
              "node_modules/cytoscape-edge-editing/cytoscape-edge-editing.js",
              "node_modules/query/dist/jquery.min.js"
            ]

浏览器中的错误如下。

ReferenceError：未定义$ [了解更多]

Answer 1

我认为“脚本”部分有错字。它应该是“ node_modules / jquery / dist / jquery.min.js”。

Answer 2

首先，您需要修改进口商品。写：

“从'cytoscape'导入cytoscape”

“从'jquery'导入$”

按照上述解决方案纠正错字错误

“ node_modules / jquery / dist / jquery.min.js”。

直接导入后，Angular将给出错误，因为您必须添加

“ allowSyntheticDefaultImports”：是，

在tsconfig.json文件中

“ experimentalDecorators”：是的，

行和tsconfig.app.json文件中的

“类型”：[]，

行。为了以角度导入jquery，您必须在your-project / node_modules / @ types / jquery下的index.d.ts文件的末尾添加以下行（如果不存在）（假设您已经安装了mpm jquery）：

export = jQuery;

然后，您将可以使用以下方法轻松注册jquery：

cytoscape.use（$）;

它将解决您面临的错误。但是jquery可以使用它所使用的扩展名，为此，您必须像下面这样在jquery中注册该扩展名：

cytoscape.use（edgeBendEditing，$）

此语句将给出参数重载的错误，因为您必须在您的project / node_modules / @ types / cytoscape下修改cytoscape的index.d.ts文件：

功能使用（模块：扩展）：无效；

对此：

功能使用（模块：扩展，模块2 ？：扩展）：无效；

它将解决您的问题。我已经使用了具有相同修正的jquery上下文菜单，希望当我遇到相同错误时对您有用。

如何在Angular中添加cytoscape扩展

2 个答案: