如何将mxGraph与Angular 4集成?

已安装的mxgraph:npm install mxgraph --save

用于mxgraph的npm软件包: www.npmjs/package/mxgraph

npm package for mxgraph: www.npmjs/package/mxgraph

已安装的mxgraph类型:npm install lgleim/mxgraph-typings --save

Installed mxgraph-typings: npm install lgleim/mxgraph-typings --save

mxgraph-typings的Github回购- github/lgleim/mxgraph-typings

Github Repo of mxgraph-typings - github/lgleim/mxgraph-typings

现在我已将其导入到组件中:import {mxgraph} from 'mxgraph';

Now I have imported it in my component: import {mxgraph} from 'mxgraph';

在.angular-cli.json资产数组中添加了以下行，以使mxGraph资产可用.

Added the following line in .angular-cli.json assets array to make the mxGraph assets available.

如果我尝试使用它，例如:const graph: mxgraph.mxGraph = new mxgraph.mxGraph(document.getElementById('graphContainer'));

当我运行ng serve

然后我遇到问题/错误，例如: Module not found: Error: Can't resolve 'mxgraph' in 'path to my file where I have imported and used mxgraph'

Then I get issue/error like: Module not found: Error: Can't resolve 'mxgraph' in 'path to my file where I have imported and used mxgraph'

现在，如果我尝试设置mxBasePath:

Now if I try with setting mxBasePath:

并以此方式使用:

const graph: mxgraph.mxGraph = mx.mxGraph(document.getElementById('graphContainer'));

当我运行ng serve

这一次我也遇到同样的问题/错误: Module not found: Error: Can't resolve 'mxgraph' in 'path to my file where I have imported and used mxgraph'

This time also I am getting same issue/error: Module not found: Error: Can't resolve 'mxgraph' in 'path to my file where I have imported and used mxgraph'

有人对我在这里想念的东西有任何想法吗?还是为什么不起作用?

Is anyone have any idea of what I am missing here? Or Why is it not working?

如果有人知道将mxGraph与Angular 4集成的任何其他/更好的方式，请告诉我.

If someone knows any other/better way of integrating mxGraph with Angular 4, then please let me know.

预先感谢！

如果仍然有人在Angular 4/5/6中与mxGraph集成苦苦挣扎.然后是完整的解决方案:

If anyone still struggling with mxGraph integration in Angular 4/5/6. Then here is Complete Solution:

有关不同的mxGraph存储库的一些详细信息:

Few details about different mxGraph Repos:

步骤:

克隆Repo-4.另外，添加官方回购协议(即Repo-2)的远程版本，以获取最新的mxGraph更新/发行版/修复程序.

Clone Repo-4. Also, add remote of the official repo(i.e. Repo-2) to take the latest mxGraph updates/release/fixes.

将目录更改为mxgraph2并运行npm install

Change directory to the mxgraph2 and run npm install

$ cd mxgraph2 $ npm install

$ cd mxgraph2 $ npm install

现在转到您的角度项目存储库并安装mxGraph(即我们在本地构建的mxgraph2).

Now go to your angular project repo and install mxGraph(i.e. mxgraph2 which we have build locally).

$ npm install /path/to/mxgraph2

例如npm install /home/user/workspace/mxgraph2

这将在package.json文件中添加如下所示的类似条目:

Which will add a similar entry as below in your package.json file:

"mxgraph": "file:../mxgraph2"

运行一次正常的npm安装.用于添加任何缺少/依赖的程序包.

Run normal npm install once. For adding any missing/dependency package.

$ npm install

现在我们将安装mxgraph类型

Now we will install mxgraph typings

注意-打字稿的最低要求为2.4.0

Note - Minimum required version of the typescript is 2.4.0

$ npm install lgleim/mxgraph-typings --save

现在您可以在应用程序中使用mxGraph.

Now you can use mxGraph in your app.

i. component.ts

i. component.ts

ii. component.html

ii. component.html

<div id="graphContainer"></div>

就是这样！

希望这会有所帮助.