How to integrate mxGraph with Angular 4?

mxgraph angular 8
mxgraph npm
how to save mxgraph
mxgraph custom data
mxgraph read-only
mxgraph load xml
mxgraph react github
jgraph download

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

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.

When you want to integrate external libraries with Angular, you also need to remember that Angular uses Typescript and typescript is a typed  I have been searching about ways to integrate mxgraph with angular 4, but could not find and resources. I also read about including all the mxgraph files in the asset folder but then do no know how to go on further with it. If anyone has a working example or atleast know how to go about please post it.

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:

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

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());
    }
  }

}

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  I want to integrate mxgraph with angular 4. Ask Question Asked 11 months ago. Active 11 months ago. Viewed 478 times -1. I took some idea

This is how i implement the use of mxGraph on Angular. I hope this could help to others.

Important: This didn't works on angular/cli --prod build. You must deactivate the optimization option on angular.json

"production": {
              "outputPath": "dist/PRO",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              **"optimization": false,**
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
... and so on

First of all install mxgraph and typins from npm as dependency and dev-dependency

npm install mxgrapf --save
npm install @types/mxgraph --save-dev

this must generate both entries into the package.json of the project

"@types/mxgraph": "github:lgleim/mxgraph-typings",
"mxgraph": "4.0.4",

After that i declare in the same file all my needed classes extending the mxgraph this save the cost of declare const mx in all the class that use mxgraph.

The file extending mxgraph classes is something like this:

import { mxgraph } from 'mxgraph'; // Typings only - no code!
declare var require: any;

/**
 *  init mxGraph whith a config object
 */
const mx: typeof mxgraph = require('mxgraph')({
    // mxgraph assets base path
    mxBasePath: 'assets/mxgraph',
    // mxgraph images
    mxImageBasePath: 'assets/mxgraph/images',
    // avoid mxgraph resources load
    mxLoadResources: false,
    mxForceIncludes: false

});

// Objects load in window object
// The original library load, loads object into the window object, this is necesray if you use
// the decode and encode models funcionality of mxgraph. Is necesary that you include all object you 
// use into your models. this is only my case.
window['mxGraphModel'] = mx.mxGraphModel;
window['mxGeometry'] = mx.mxGeometry;
window['MxGeometry'] = mx.mxGeometry;
window['MxPoint'] = mx.mxPoint;
window['mxPoint'] = mx.mxPoint;

/**
 * Into MXUTILITIES exports all the object created by mxgraph as staric properties as we need
 **/
export class MXUTILITIES {
    static mxEvent = mx.mxEvent;
    static mxUtils = mx.mxUtils;
    static mxConstants = mx.mxConstants;
    static mxStencilRegistry = mx.mxStencilRegistry;
    static mxPerimeter = mx.mxPerimeter;
    static mxEdgeStyle = mx.mxEdgeStyle;
    static mxEffects = mx.mxEffects;
    static mxClient = mx.mxClient;
    static mxCodecRegistry = mx.mxCodecRegistry;

}

/**
 * Exports for all classes we need extending mxgrah, you can extend, overwrite methods and so on
 * 
 */
export class MxGraphModel extends mx.mxGraphModel {}
export class MxOutline extends mx.mxOutline { }
export class MxKeyHandler extends mx.mxKeyHandler { }
export class MxCompactTreeLayout extends mx.mxCompactTreeLayout { }
export class MxLayoutManager extends mx.mxLayoutManager { }
export class MxDivResizer extends mx.mxDivResizer { }
export class MxCellOverlay extends mx.mxCellOverlay { }
export class MxImage extends mx.mxImage { }
export class MxEdgeHandler extends mx.mxEdgeHandler { }
export class MxPrintPreview extends mx.mxPrintPreview { }
export class MxWindow extends mx.mxWindow { }
export class MxGraphView extends mx.mxGraphView { }
export class MxGraphHandler extends mx.mxGraphHandler { }
export class MxGraphSelectionModel extends mx.mxGraphSelectionModel { }
export class MxToolbar extends mx.mxToolbar { }
export class MxEventObject extends mx.mxEventObject { }
export class MxCodec extends mx.mxCodec { }
export class MxObjectCodec extends mx.mxObjectCodec { }
export class MxFastOrganicLayout extends mx.mxFastOrganicLayout { }
export class MxGeometry extends mx.mxGeometry { }
export class MxHierarchicalLayout extends mx.mxHierarchicalLayout { }
export class MxStencil extends mx.mxStencil { }
export class MxRubberband extends mx.mxRubberband { }
export class MxCellRenderer extends mx.mxCellRenderer { }
export class MxPoint extends mx.mxPoint { }
export class MxConnector extends mx.mxConnector { }
export class MxLine extends mx.mxLine { }
export class MxArrowConnector extends mx.mxArrowConnector { }
export class MxCell extends mx.mxCell {}
export class MxGraph extends mx.mxGraph {}

Closed. viskel opened this issue on Aug 4, 2017 · 31 comments. Closed If anyone struggling with mxGraph integration in Angular 4/5/6. Then here is Complete  I'm changing the package.json in mxGraph follow @NicCOConnor and make some modification in it as below and it seem able to install in angular 4, but I am not sure it's correct or not. grunt-webpack and webpack version is based on my local machine version. you might need to change it follow yours local machine version.

Read this stackoverflow thread: https://stackoverflow.com/questions/49922708/​how-to-integrate-mxgraph-with-angular-4. The answer works for angular 6 as well  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.

I want to integrate mxgraph with angular 4. scss files. GitHub is GitHub is home to over 40 million developers working together to host and review code, manage  Need to integrate mxGraph with Angular 6 [closed] Ask Question Asked 1 year, 8 months ago. Active 1 month ago. How to integrate mxGraph with Angular 4? 2.

Integration of MX-Graph to Angular Link if I want edge with no arrow's, in the end, I can add 'endArrow=none;' as the fourth parameter. We changed the assests and the scripts properties, to the scripts we added two js files, mxgraph.conf.js that contains some mxgraph configuration and the mxClient.js that is mxgraph library. With these two lines, we are saying to angular to bundle together our scripts.

Comments
  • what do you mean by Also, add remote of the official repo ?
  • When you clone Repo-4. You may also need continues updates/bug fixes in future form mxGraph. So for that changes, you need to add a git remote of the official repo(i.e. Repo-2) as well to the same cloned repo(i.e. Repo-4).
  • This repo need updating, lot's of classes are missing, see jgraph.github.io/mxgraph/docs/js-api/files/index-txt.html
  • Thanks for sharing your knowledge, even using React.js with Typescript it has been very util for me!