How To Import Exporting.js And Export-data.js Using Angular2-highcharts And AOT Compiler?

I'm using angular2-highcharts and my chart works just fine, but I need to export the chart to XLS. All I need to achieve this is doing HighchartsExporting(Highcharts); HighchartsEx

Solution 1:

You can create an instance of Highcharts with all modules loaded like HighchartsModule(Highcharts) and then pass the instance to forRoot function as explained in the angular2-highcharts docs.

You should be able to load the modules using require or import.

import * as Highcharts from 'highcharts';
require('highcharts/modules/exporting')(Highcharts);

or

import * as Highcharts from 'highcharts';
import * as HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

and next the same as in the mentioned docs:

@NgModule({
    ...
    imports: [
      BrowserModule, 
      ChartModule.forRoot(
-       require('highcharts'),
+       Highcharts
      )
    ],
})

Solution 2:

Just in case this helps anyone, I couldn't do it using imports. Instead, I had to include the <script src="~/node_modules/highcharts/modules/exporting.js"> tag in my HTML. Since this JS is a self-invoking function, that's all it takes to make it work.