如何将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

   Github回购mxgraph-typings- https://github.com/lgleim/mxgraph-typings

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

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

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

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

6. 现在，如果我尝试设置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集成的任何其他/更好的方式，请告诉我。

提前致谢 ！！

Answer 1

如果有人还在为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.

脚步：

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

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

   $ cd mxgraph2
$ npm install

3. 现在转到您的角度项目存储库并安装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类型

   注意-打字稿的最低要求版本是2.4.0

   $ npm install lgleim/mxgraph-typings --save

6. 现在，您可以在应用程序中使用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>

7. 而已 ！！

希望对您有所帮助。

Answer 2

这就是我在 Angular 上实现 mxGraph 的使用的方法。我希望这对其他人有帮助。

\n\n

重要提示：这不适用于 angular/cli --prod 构建。您必须停用 angular.json 上的优化选项

\n\n

"production": {\n              "outputPath": "dist/PRO",\n              "fileReplacements": [\n                {\n                  "replace": "src/environments/environment.ts",\n                  "with": "src/environments/environment.prod.ts"\n                }\n              ],\n              **"optimization": false,**\n              "outputHashing": "all",\n              "sourceMap": false,\n              "extractCss": true,\n              "namedChunks": false,\n... and so on\n

\n\n

首先从 npm 安装 mxgraph 和 typesins 作为依赖项和开发依赖项

\n\n

npm install mxgrapf --save\nnpm install @types/mxgraph --save-dev\n

\n\n

这必须在项目的 package.json 中生成两个条目

\n\n

"@types/mxgraph": "github:lgleim/mxgraph-typings",\n"mxgraph": "4.0.4",\n

\n\n

之后，我在同一个文件中声明扩展 mxgraph 所需的所有类，这节省了在所有使用 mxgraph 的类中声明 const mx 的成本。

\n\n

扩展 mxgraph 类的文件是这样的：

\n\n

\r\n

\r\n

"production": {\n              "outputPath": "dist/PRO",\n              "fileReplacements": [\n                {\n                  "replace": "src/environments/environment.ts",\n                  "with": "src/environments/environment.prod.ts"\n                }\n              ],\n              **"optimization": false,**\n              "outputHashing": "all",\n              "sourceMap": false,\n              "extractCss": true,\n              "namedChunks": false,\n... and so on\n

\r\n

\r\n

\r\n

\n\n

为了创建新图表，我使用一项服务来存储生成的图表并通知选定的单元格以及为所有订阅的组件创建的新图表

\n\n

\r\n

\r\n

npm install mxgrapf --save\nnpm install @types/mxgraph --save-dev\n

\r\n

\r\n

\r\n

\n