How to Integrate mxgraph editor in angular2?

Question

How to Integrate mxgraph editor in angular2 by using JavaScript client library?

What I've tried so far,

1. I have installed mxgraph using the npm package -- npmjs.com/package/mxgraph.
2. Then imported all the required js file from it through vendor.ts file as shown in mxgraph editor index.html.
3. Created type definition files for mxutil, editorUI, editor js files in it.
4. We are not able to load the graph editor in my angular2 app.

So, I would like to know how to integrate mxgraph editor in to my angular2 app.

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.