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

Answer 1

I have had the exact same problem. According to the 'lgleim', the problem is with the mxgraph npm package. The issue is discussed here: https://github.com/jgraph/mxgraph/issues/169.

I colud not solve the said problem. However I successfully integrated mxgraph with angular 7 by following this article: https://itnext.io/how-to-integrate-mxgraph-with-angular-6-18c3a2bb8566

Step 1

First of all install latest version of mxgraph:

npm install mxgraph

Step 2

Then download the typings from https://github.com/gooddaytoday/mxgraph-typescript-definitions.git. Extract the file into the 'src' folder of your angular project

Step 3

In your angular.json file, add the following:

1. In assets array add:

   { "glob": "**/*", "input": "src/assets/", "output": "/assets/" },

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

2. In scripts array add:

   "node_modules/mxgraph/javascript/mxClient.js"

There are two scripts and assets arrays. Once in "build" and once in "test". Add in both.

After doing all that, you are good to go. :)

Example Code:

component.html:

component.ts

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
declare var mxPerimeter: any;
declare var mxConstants: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  @ViewChild('graphContainer') graphContainer: ElementRef;
  graph: mxGraph;

  ngAfterViewInit() {
    this.graph = new mxGraph(this.graphContainer.nativeElement);

    // set default styles for graph
    const style = this.graph.getStylesheet().getDefaultVertexStyle();
    style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
    style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
    style[mxConstants.DEFAULT_VALID_COLOR] = '#00FF00';
    this.graph.getStylesheet().putDefaultVertexStyle (style);

    // add cells
    try {
      const parent = this.graph.getDefaultParent();
      this.graph.getModel().beginUpdate();
      const vertex1 = this.graph.insertVertex(parent, '1', 'Vertex 1', 0, 0, 200, 80);
      const vertex2 = this.graph.insertVertex(parent, '2', 'Vertex 2', 0, 0, 200, 80);
      this.graph.insertEdge(parent, '', '', vertex1, vertex2);
    } finally {
      this.graph.getModel().endUpdate();
      new mxHierarchicalLayout(this.graph).execute(this.graph.getDefaultParent());
    }
  }

}

Note that I have used declare statement to declare mxPerimeter and mxConstants. The reason is that the type definitions are incomplete. Hence I had to declare some of the class names by myself. This just a little hack to avoid compiler errors. By using declare statement I am essentially telling the compiler to allow this class. However it will not help with the intellisense used by various text editor.