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.
