Error with AoT compilation

[ekuusi]

I'm hitting an error when doing AoT compilation with angular2-nvd3 in my project:

Unexpected value 'NvD3Module in .../node_modules/angular2-nvd3/dist/angular2-nvd3/angular2-nvd3.module.d.ts' imported by the module 'ChartModule in .../assets/app/charts/chart.module.ts'

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
...
import { NvD3Module } from 'angular2-nvd3';

@NgModule({
	declarations: [ ... ],
        imports: [ ...
                NvD3Module
        ],
        providers: [ ... ],
        exports: [ ... ]
})
export class ChartModule {}

The module works perfectly with just in time compilation and is a great improvement to ng2-nvd3 which I've used so far, but I really need the AoT compilation to work to use this in production. Can you replicate this issue? Any ideas how to fix this?

ng2-nvd3 has worked just fine with AoT compilation, but I would love to get rid of the bugs it has that angular2-nvd3 fixes.

[michielvermeir]

https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad

Something along those lines needs to happen I suppose?

[ekuusi]

That sounds about right I think, at least the error matches. Just in case someone wants a quick temporary fix, I got this to work with AoT with a workaround by copying the components to my own project instead of using the module.

[michielvermeir]

I was giving it a shot earlier today but I couldn't get ngc to emit .metadata.json files as the article suggests. The whole Angular 2 toolchain is rather befuddling to me.

Maybe I'll try again once I get some free time. Until then, this library is sort of unusable in conjunction with Angular CLI. Any workarounds?

[ekuusi]

Copy all four files from /src/angular2-nvd3 into your own project and replace the "ngOnChanges()" methods with "ngOnChanges(changes?)". Then you can just import the module into your app.module.ts and the component where you want to use the selector, works with AoT.

import { NvD3Module } from '../nvd3/angular2-nvd3.module';
declare var d3: any;

@Component({
	selector: 'app-timeframebarchart',
	template: '<app-nvd3 [options]="options" [data]="data"></app-nvd3>'
})

Of course you also still need to include the separately downloadable nv.d3.css in your project for the styles to be right.

[michielvermeir]

@ekuusi I had some success in getting this package ready for AOT by changing the tsconfig.json to include "angularCompilerOptions": { "strictMetadataEmit": true } and compile ngc instead of tsc in the package.json.

This requires that you install @angular/compiler-cli as a dev dependency. ngc then emits the necessary .metadata.json files for AOT. I'll look at creating a pull request later. For now I have published an npm package that works for me (i.e. https://www.npmjs.com/package/angular2-nvd3-aot).

[hendrathings]

I close this issue, since I accept Ready for AOT #10