如何将jsnetworkx库添加到ionic或angular 4项目中？

Question

在ionic3应用程序的任何服务中

import * as jsnx from 'jsnetworkx';

输出错误如下

Uncaught (in promise): Error: Cannot find module "lodash/lang/isPlainObject" Error: Cannot find module "lodash/lang/isPlainObject" at webpackMissingModule

我试着这样声明它

import jsnx = require('jsnetworkx');

错误是这样的

 Uncaught (in promise): ReferenceError: jsnx is not defined ReferenceError: jsnx is not defined at

两个程序包都已安装

...,
"jsnetworkx": "^0.3.4",
"lodash": "^4.17.4",
...

如果有人知道如何在angular 4 o ionic中工作？

带有节点的库工作正常。

Answer 1

我可以通过在安装jsnetworkx的同时安装d3 v3 (jsnetworkx的依赖项)来实现这一点。

npm install --save d3@^3.0.0
npm install --save jsnetworkx

然后在angular-cli.json中加载d3脚本

// angular-cli.json
scripts: [
    "../node_modules/d3/d3.min.js"
]

然后将jsnetworkx导入到组件中

// component.ts
import * as jsnx from 'jsnetworkx';

现在，您可以在该组件中使用它

// component.ts
ngOnInit(){
    // basic jsnetworkx example
    let G = new jsnx.Graph();

    G.addWeightedEdgesFrom([[2,3,10]]);
    G.addStar([3,4,5,6], {weight: 5});
    G.addStar([2,1,0,-1], {weight: 3});

    jsnx.draw(G, {
        element: '#canvas',
        weighted: true,
        edgeStyle: {
            'stroke-width': 10
        }
    });
}

// component.html
<div id="canvas"></div>