Angular 2 - AOT - call function 'ChartModule', function calls are not supported

Question

I lose my mind and hair over this. I import HighCharts into Angular 2, but this requires some additional libraries. While in my code there is

import {ChartModule} from 'angular2-highcharts'; @NgModule({ .... imports:[ ChartModule.forRoot(require('highcharts'), require('highcharts/modules/drilldown'))}) ] 

But I keep getting this error

Error in error. The calling function is 'ChartModule'. function calls are not supported. Consider replacing a function or lambda with a link to the exported version.

So i tried

 export function highchartsRequire:any { return{ require('highcharts'), require('highcharts/modules/drilldown') } } ... ChartModule.forRoot(highchartsRequire()) 

Still not working. Any ideas?

Using Angular 2 angular cli: 1.0.0-beta.30

UPDATE - it partially works thanks to JayChase

It works

 export function highchartsFactory() { return require('highcharts'); } 

But I can't demand two at a time

 declare var require: any; export function highchartsFactory() { return function () { require('highcharts'); require('highcharts/modules/drilldown') }; } @NgModule({ imports: [ ChartModule ], providers: [ { provide: HighchartsStatic, useFactory: highchartsFactory } ], 

Any ideas? Thanks.

Answer 1

There is a problem open for this, and a workaround here is with the exported function.

  import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { ChartModule } from 'angular2-highcharts'; import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService'; import { AppComponent } from './app.component'; declare var require: any; export function highchartsFactory() { const hc = require('highcharts'); const dd = require('highcharts/modules/drilldown'); dd(hc); return hc; } @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, ChartModule ], providers: [ { provide: HighchartsStatic, useFactory: highchartsFactory } ], bootstrap: [AppComponent] }) export class AppModule { }