How to integrate mxGraph with Angular 4?

Question

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:

1. Installed mxgraph: npm install mxgraph --save

   npm package for mxgraph: https://www.npmjs.com/package/mxgraph

2. Installed mxgraph-typings: npm install lgleim/mxgraph-typings --save

   Github Repo of mxgraph-typings - https://github.com/lgleim/mxgraph-typings

3. Now I have imported it in my component: import {mxgraph} from 'mxgraph';

4. 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"}
   

5. 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'

6. 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 !!

Answer 1

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:

1. Clone Repo-4. Also, add remote of the official repo(i.e. Repo-2) to take the latest mxGraph updates/release/fixes.

2. Change directory to the mxgraph2 and run npm install

   $ cd mxgraph2
$ npm install

3. 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"

4. Run normal npm install once. For adding any missing/dependency package.

   $ npm install

5. Now we will install mxgraph typings

   Note - Minimum required version of the typescript is 2.4.0

   $ npm install lgleim/mxgraph-typings --save

6. 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>

7. That's it !!

Hope it will be helpful.