Angular2-highcharts in a submodule

[LucaDelBuono]

I'm having problems making angular2-highcharts work in a submodule.

If I follow the instructions provided in the readme and add the import in app.module.ts, create a simple chart in app.component.ts and have <chart [options]="options"> in app.component.html, etc... it works fine... but if I move those bits in a submodule (stats.module.ts, stats.component.ts and stats.component.html respectively), I get this error:

Unhandled Promise rejection: Template parse errors: Can't bind to 'options' since it isn't a known property of 'chart'.

What am I doing wrong?

[LucaDelBuono]

Never mind, managed to make it work :)

[Robouste]

would be great if you share your solution :)

[LucaDelBuono]

You can only have .forRoot calls in the root of your app, so in app.module.ts you'll have:

import { ChartModule } from 'angular2-highcharts';

import * as highcharts from 'highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';

export function highchartsFactory() {
    const hc = require('highcharts');
    const dd = require('highcharts/modules/drilldown');
    dd(hc);

    return hc;
}

@NgModule({
    .....
    imports: [
        ......
        ChartModule.forRoot(require('highcharts')),
        ......
    ],
    exports: [
        .....
        ChartModule,
        .....
    ],
    providers: [
        .....
        {
            provide: HighchartsStatic,
            useFactory: highchartsFactory
        },
        .....
    ],
    .....
})

Then, in your submodule.module.ts:

import { ChartModule } from 'angular2-highcharts';

.....
@NgModule({
    imports: [
        .....
        ChartModule,
        .....
    ],
})
.....

Hope that helps...

[kevinlimasilva1]

Helped me a lot! Thanks!