Search code examples
angularjsyfiles

Angular 2 CLI and yfiles for HTML 2.0.0 - Cannot read property 'GraphComponent' of undefined

THE PROBLEM

I am trying to integrate yfiles for HTML into an Angular 2 application that uses the Angular CLI. I am using the latest version of Angular 2 and the latest BETA release of the CLI.

I have installed the types using npm install --save @types/yfiles.

I have placed the required yfiles folders in my project and have updated angular-cli.json to include the required sytles and scripts:

"styles": [
      "../lib/yfiles.css"
  ],
  "scripts": [
      "../lib/license.js",
      "../lib/yfiles/view-component.js",
      "../lib/yfiles/view-layout-bridge.js",
      "../lib/yfiles/layout-hierarchic.js",
      "../lib/yfiles/layout-tree.js",
      "../lib/yfiles/router-polyline.js",
      "../lib/yfiles/router-other.js"
  ],

I have confirmed that a build includes these scripts in the bundled scripts output after running ng build.

When trying to reference yfiles the autocomplete works in the IDE (latest Webstorm):

graphComponent: yfiles.view.GraphComponent;

constructor(private element: ElementRef,
            injector: Injector,
            resolver: ComponentFactoryResolver) { }

ngAfterViewInit() {
    let containerDiv:HTMLDivElement =     
this.element.nativeElement.getElementsByClassName('graph-control-container')  
[0];
    this.graphComponent = new yfiles.view.GraphComponent(containerDiv);

}

The project compiles and runs when ng serve is issued BUT when I navigate to a route that activates the component that is trying to use yfiles, an error is thrown and reported in the console:

error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: Error in ./BrowseVisualisationsComponent class BrowseVisualisationsComponent - inline template:0:0 caused by: Cannot read property 'GraphComponent' of undefined

I have tried importing the yfiles modules - for example:

import 'yfile/view-component'

This just prevents ng serve from building the application:

ERROR in ./src/app/shared/table-relationship-visualisation/table-relationship-visualisation.component.ts
Module not found: Error: Can't resolve 'yfiles/view-component' in '/home/VMdev/Documents/iotahoe_client/src/app/shared/table-relationship-visualisation'
 @ ./src/app/shared/table-relationship-visualisation/table-relationship-visualisation.component.ts 12:0-31
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi main

Any assistance appreciated.

Solution

  • The scripts provided in the app.scripts array will just be loaded as if they would have been referenced with regular <script> tags - no module resolving will take place at all.

    However, the yFiles modules you provided in the scripts array are "meta modules" that would load the actual implementation files using AMD/CommonJS-style define/require statements. Therefore, in order to load the yFiles functionality with angular-cli, you will have to provide the actual implementation files directly: 

    "scripts": [
  "./assets/yfiles/license.js",
  "./assets/yfiles/lib/yfiles/impl/lang.js",
  "./assets/yfiles/lib/yfiles/impl/graph-core.js",
  "./assets/yfiles/lib/yfiles/impl/core-lib.js",
  "./assets/yfiles/lib/yfiles/impl/graph-styles-core.js",
  "./assets/yfiles/lib/yfiles/impl/graph-styles-default.js",
  "./assets/yfiles/lib/yfiles/impl/algorithms.js",
  "./assets/yfiles/lib/yfiles/impl/graph-styles-template.js",
  "./assets/yfiles/lib/yfiles/impl/graph-styles-other.js",
  "./assets/yfiles/lib/yfiles/impl/graph-binding.js",
  "./assets/yfiles/lib/yfiles/impl/layout-core.js",
  "./assets/yfiles/lib/yfiles/impl/graph-layout-bridge.js",
  "./assets/yfiles/lib/yfiles/impl/layout-polyline.js",
  "./assets/yfiles/lib/yfiles/impl/layout-router.js",
  "./assets/yfiles/lib/yfiles/impl/layout-tree.js",
  "./assets/yfiles/lib/yfiles/impl/layout-hierarchic.js"
],

    It's unfortunate that the modules can't be resolved automatically with this approach even though the yFiles modules adhere to the UMD pattern, but I don't see a better option to make this work with angular-cli right now.

    To generate the list of the yFiles implementation modules in the correct order, you can use our yeoman generator with the "script-tags" option: https://www.npmjs.com/package/generator-yfiles-app