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

Question

我正在使用 Angular 4，我想将 mxGraph 集成到我的项目中。我用谷歌搜索了它，但没有得到完整的工作示例。

我试过以下方法，但它也不适合我。

我遵循的步骤:

1. 已安装 mxgraph:npm install mxgraph --save

   mxgraph 的 npm 包:https://www.npmjs.com/package/mxgraph

2. 已安装 mxgraph-typings:npm install lgleim/mxgraph-typings --save

   mxgraph-typings 的 Github repo - https://github.com/lgleim/mxgraph-typings

3. 现在我已将它导入到我的组件中:import {mxgraph} from 'mxgraph';

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

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

5. 如果我尝试像这样使用它:const graph: mxgraph.mxGraph = new mxgraph.mxGraph(document.getElementById('graphContainer'));

   当我运行 ng serve

   然后我得到如下问题/错误:
   找不到模块:错误:无法解析“我已导入并使用 mxgraph 的文件的路径”中的“mxgraph”

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

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

   像这样使用:

   常量图:mxgraph.mxGraph = mx.mxGraph(document.getElementById('graphContainer'));

   当我运行 ng serve

   这次我也遇到了同样的问题/错误:
   找不到模块:错误:无法解析“我已导入并使用 mxgraph 的文件的路径”中的“mxgraph”

有人知道我在这里缺少什么吗？或者为什么它不起作用？

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

提前致谢!!

Answer 1

如果有人仍在为 Angular 4/5/6 中的 mxGraph 集成而苦苦挣扎。那么这里是完整的解决方案:

关于不同 mxGraph Repos 的一些细节:

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.

步骤:

1. 克隆 Repo-4。此外，添加官方存储库的远程(即 Repo-2)以获取最新的 mxGraph 更新/发布/修复。

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

   $ cd mxgraph2
$ npm install

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

   $ npm install /path/to/mxgraph2

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

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

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

4. 运行一次正常的 npm install。用于添加任何缺失/依赖包。

   $ npm install

5. 现在我们将安装 mxgraph typings

   注意 - typescript 的最低要求版本是 2.4.0

   $ npm install lgleim/mxgraph-typings --save

6. 现在您可以在您的应用中使用 mxGraph。

   我。组件.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.
   }
   

   二。组件.html

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

7. 就是这样!!

希望对您有所帮助。