如何将 mxGraph 与 Angular 4 集成? [英] How to integrate mxGraph with Angular 4?

查看：34 发布时间：2021/11/8 23:59:08 angular angular-cli typescript-typings mxgraph

本文介绍了如何将 mxGraph 与 Angular 4 集成?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在研究 Angular 4，我想将 mxGraph 集成到我的项目中.我用谷歌搜索过，但没有得到完整的工作示例.

我尝试了以下方法，但它也不适合我.

我遵循的步骤:

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

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

有人知道我在这里遗漏了什么吗?或者为什么它不起作用?

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

提前致谢！！

解决方案

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

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

Repo-1: https://github.com/jgraph/mxgraph这是 mxGraph 的官方版本存储库.与 npm 问题.回购 2:https://bitbucket.org/jgraph/mxgraph2这是 mxGraph 的官方开发库.与 npm 问题.如果有人想查看上述这些 repos(即 Repo-1 和 Repo-2)的 npm 问题，请检查以下问题:- https://github.com/jgraph/mxgraph/issues/169- https://github.com/jgraph/mxgraph/issues/175Repo-3:https://bitbucket.org/lgleim/mxgraph2Repo-2 的分叉.使用 npm 修复.Repo-4:https://github.com/ViksYelapale/mxgraph2Repo-2 的分叉.也从 Repo-3 合并了 npm 修复.向此存储库添加了更改(即本地安装 mxGraph 所需).

步骤:

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

我.组件.ts

import { mxgraph } from "mxgraph";声明 var 要求:任何；const mx = require('mxgraph')({mxImageBasePath: 'assets/mxgraph/images',mxBasePath: '资产/mxgraph'});...ngOnInit() {//注意 - 使用 mx.xyz 可访问的所有 mxGraph 方法//例如.mx.mxGraph、mx.mxClient、mx.mxKeyHandler、mx.mxUtils 等.//创建图形var container = document.getElementById('graphContainer');var graph = new mx.mxGraph(container);//您可以尝试使用官方文档中给出的演示代码进行上述更改.}

二.组件.html

就是这样！！

希望能帮到你.

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.

Steps I have followed:

Installed mxgraph: npm install mxgraph --save

npm package for mxgraph: https://www.npmjs.com/package/mxgraph
Installed mxgraph-typings: npm install lgleim/mxgraph-typings --save

Github Repo of mxgraph-typings - https://github.com/lgleim/mxgraph-typings
Now I have imported it in my component: import {mxgraph} from '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"}
```
If I try to use it like: const graph: mxgraph.mxGraph = new mxgraph.mxGraph(document.getElementById('graphContainer'));

And when I run ng serve

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'
Now if I try with setting mxBasePath:
```
const mx = require('mxgraph')({
  mxImageBasePath: 'mxgraph/images',
  mxBasePath: 'mxgraph'
});
```
And used like this:

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

And when I run ng serve

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?

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

Thanks in Advance !!

解决方案

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

Few details about different 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.

Steps:

Clone Repo-4. Also, add remote of the official repo(i.e. Repo-2) to take the latest mxGraph updates/release/fixes.
Change directory to the mxgraph2 and run npm install

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

$ npm install /path/to/mxgraph2

e.g. npm install /home/user/workspace/mxgraph2

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

"mxgraph": "file:../mxgraph2"
Run normal npm install once. For adding any missing/dependency package.

$ npm install
Now we will install mxgraph typings

Note - Minimum required version of the typescript is 2.4.0

$ npm install lgleim/mxgraph-typings --save

Now you can use mxGraph in your app.

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

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

That's it !!

Hope it will be helpful.

这篇关于如何将 mxGraph 与 Angular 4 集成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何将 mxGraph 与 Angular 4 集成? [英] How to integrate mxGraph with Angular 4?

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

如何将 mxGraph 与 Angular 4 集成? [英] How to integrate mxGraph with Angular 4?

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭