Using yFiles in Angular CLI Projects

Angular CLI is a scaffolding and build tool that makes it easy to set up and build an Angular application. It automatically configures all related build tools (TypeScript, Webpack, testing tools). The downside of using Angular CLI not only for scaffolding but also as the build- and deployment tool is that it is not easy to configure some of the tools that are used under the hood, or to add custom build steps to the toolchain.

Configuring Angular CLI to bundle the yFiles library modules

As yFiles for HTML also comes in ES6 module format, it can be imported and used after configuring some paths.

These are the important steps for making yFiles work in an Angular CLI app:

• In your tsconfig.json, add an entry for yFiles in the 'paths' compiler option, and include the TypeScript definition file for yFiles for HTML:

  {  
  "compilerOptions": {    
    ...    
    "paths": {      
      "yfiles/*": ["../../../../lib/es6-modules/yfiles/*"]
    }
  },
  "include": [
    "**/*.ts",
    "../../../../ide-support/yfiles-api-es6-modules-webstorm.d.ts",
    ...
  ],
  ...
  }
  

• The yfiles stylesheet must be bundled with the package as well: it may be added to the list of apps[0].styles in .angular-cli.json:

  {
  
    ...,
  
    "apps": [
      {
  
        ...,
  
        "styles": [  
          "styles.css",
          "../../../../lib/yfiles.css"
        ]
      }
    ]
  }
  

With this configuration, you can now use yFiles types in your *.component.ts files by simply importing them. E.g, a basic component that displays a yFiles GraphComponent could look like this:

import {Component, OnInit, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
import {GraphComponent, Point} from 'yfiles/view-component';
import {GraphEditorInputMode} from 'yfiles/view-editor';

@Component({
  selector: 'app-graph-component',
  templateUrl: './graph-component.component.html',
  styleUrls: ['./graph-component.component.css']
})
export class GraphComponentComponent implements OnInit, AfterViewInit {
  @ViewChild('gcContainer') el:ElementRef;
  constructor() { }

  ngOnInit() {
    this.gc = new GraphComponent(this.el.nativeElement);
    this.gc.inputMode = new GraphEditorInputMode();

    const graph = this.gc.graph;
    const n1 = graph.createNodeAt(new Point(0,0));
    const n2 = graph.createNodeAt(new Point(0,100));
    const n3 = graph.createNodeAt(new Point(100,0));

    graph.createEdge(n1, n2);
    graph.createEdge(n2, n3);
    graph.createEdge(n3, n1);
  }

  ngAfterViewInit() {
    this.gc.fitGraphBounds();
  }

}

Where the corresponding component .html file would contain just

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

And the .css file:

:host {
  display: block;
  border: 1px solid black;
  flex: 1;
}

#gcContainer {
  width: 100%;
  height: 100%;
}