angular - 如何将mxGraph与Angular 4集成？

我正在使用Angular 4，并且希望将mxGraph集成到我的项目中。
我已经用谷歌搜索了，但是我没有得到完整的工作示例。

我尝试了以下方式，但它也对我不起作用。

我遵循的步骤:

已安装的mxgraph:npm install mxgraph --save
用于mxgraph的npm软件包:https://www.npmjs.com/package/mxgraph

安装的mxgraph类型:npm install lgleim/mxgraph-typings --save
Github Repo的mxgraph-类型-https://github.com/lgleim/mxgraph-typings

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

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

{"glob":"**/*", "input":"node_modules/mxgraph/javascript/src", "output": "./mxgraph"}

如果我尝试像这样使用它: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'

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

const mx = require('mxgraph')({
  mxImageBasePath: 'mxgraph/images',
  mxBasePath: 'mxgraph'
});

像这样使用:
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'

有谁知道我在这里想念的东西吗？或为什么它不起作用？

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

提前致谢 !!

最佳答案

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

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

Repo-1: https://github.com/jgraph/mxgraph
        This is an official release repo of mxGraph. With npm issues.

Repo-2: https://bitbucket.org/jgraph/mxgraph2
        This is an official development repo of mxGraph. With npm issues.

If anyone wants to see what npm issues with these above repos(i.e. Repo-1 and Repo-2), then check these following issues:
            - https://github.com/jgraph/mxgraph/issues/169
            - https://github.com/jgraph/mxgraph/issues/175

Repo-3: https://bitbucket.org/lgleim/mxgraph2
        Fork of Repo-2. With npm fixes.

Repo-4: https://github.com/ViksYelapale/mxgraph2
        Fork of Repo-2. Merged npm fixes from Repo-3 as well. Added changes(i.e. required for local installation of mxGraph) to this repo.

步骤:

Clone Repo-4。另外，添加官方 repo 协议(protocol)(即Repo-2)的远程版本，以获取最新的mxGraph更新/发行版/修复程序。

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

现在转到您的 Angular 项目存储库并安装mxGraph(即我们在本地构建的mxgraph2)。
$ npm install /path/to/mxgraph2
例如npm install /home/user/workspace/mxgraph2
它将在package.json文件中添加如下所示的类似条目:
"mxgraph": "file:../mxgraph2"

运行正常的npm安装一次。用于添加任何丢失/依赖包。
$ npm install

现在我们将安装mxgraph类型

注意- typescript 的最低要求版本是2.4.0
$ npm install lgleim/mxgraph-typings --save

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

一世。 component.ts

import { mxgraph } from "mxgraph";

declare var require: any;

const mx = require('mxgraph')({
  mxImageBasePath: 'assets/mxgraph/images',
  mxBasePath: 'assets/mxgraph'
});

.
.
.

ngOnInit() {
   // Note - All mxGraph methods accessible using mx.xyz
   // Eg. mx.mxGraph, mx.mxClient, mx.mxKeyHandler, mx.mxUtils and so on.

   // Create graph

   var container = document.getElementById('graphContainer');
   var graph = new mx.mxGraph(container);

   // You can try demo code given in official doc with above changes.
}

ii。 component.html
<div id="graphContainer"></div>

就是这样!

希望对您有所帮助。