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!