我正在使用Angular 4,并且希望将mxGraph集成到我的项目中. 我已经用谷歌搜索了,但是我没有完整的示例.
I am working on Angular 4 and I want to integrate mxGraph in my project. I have googled for it but I am not getting the full working example.
我尝试过以下方法,但对我也不起作用.
I have tried following way, but it also not working for me.
我遵循的步骤:
已安装的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.
{"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'
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 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'
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-1: github/jgraph/mxgraph This is an official release repo of mxGraph. With npm issues. Repo-2: bitbucket/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: - github/jgraph/mxgraph/issues/169 - github/jgraph/mxgraph/issues/175 Repo-3: bitbucket/lgleim/mxgraph2 Fork of Repo-2. With npm fixes. Repo-4: github/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.步骤:
克隆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
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
ii. component.html
<div id="graphContainer"></div>
就是这样!
希望这会有所帮助.
更多推荐
如何将mxGraph与Angular 4集成?
发布评论