Need to integrate mxGraph with Angular 6

Question

I need to implement a gantt chart and think mxGraph Gantt could be the ideal solution. The only problem is with the integration of it in the application.

Has anyone tried integrating and implementing it. If so , then please provide some directions/instructions on how to use it.

https://github.com/jgraph/mxgraph/

Answer 1

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.