0

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);
HighchartsExportData(Highcharts);

somewhere in the code, and the export options will show up by the chart.

The problem is how to import HighchartsExporting and HighchartsExportData properly, because the standard solution 

@NgModule({
    imports: [
      BrowserModule, 
      ChartModule.forRoot(
        require('highcharts'),
        require('highcharts/modules/exporting')
      ],

won't work with AOT, giving me some "Error encountered resolving symbol values statically" at compile time.

I can get it to work by doing 

import * as HichartsExporting from 'highcharts/modules/exporting';
import * as HighchartsExportData from 'highcharts/modules/export-data';

as suggested here, but it gives me 2 errors:

  • Error TS2497: Module '"xxxx/highcharts/modules/exporting"' resolves to a non-module entity and cannot be imported using this construct. - JIT compilation
  • Cannot find module 'highcharts/modules/export-data'. - AOT compilation

I can get around this by doing

import HichartsExporting  = require('highcharts/modules/exporting');
import HighchartsExportData = require('highcharts/modules/export-data');

as suggested here, but after AOT compilation, I get "Uncaught ReferenceError: require is not defined" at runtime.

All solutions seem to work fine in practice, I just can't compile them. Any suggestions are welcome.

coconochao
  • 141
  • 7

2 Answers2

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
      )
    ],
})
Kacper Madej
  • 7,846
  • 22
  • 36
  • 1
    The only problem is "import * as HC_exporting from 'highcharts/modules/exporting';" gives me that "resolves to a non-module entity" error. – coconochao Nov 10 '17 at 14:45
0

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.

coconochao
  • 141
  • 7