Как импортировать exporting.js и export-data.js с помощью angular2-highcharts и компилятора AOT?

Я использую angular2-highcharts, и моя диаграмма работает нормально, но мне нужно экспортировать диаграмму в XLS.

Все, что мне нужно для этого, это делать

HighchartsExporting(Highcharts);
HighchartsExportData(Highcharts);

где-то в коде, и параметры экспорта будут отображаться на диаграмме.

Проблема заключается в том, как правильно импортировать HighchartsExporting и HighchartsExportData, потому что стандартное решение< /а>

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

не будет работать с AOT, выдавая мне "Ошибка при статическом разрешении значений символов" во время компиляции.

Я могу заставить его работать, выполнив

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

как предложено здесь, но это дает мне 2 ошибки:

  • Ошибка TS2497: модуль "xxxx/highcharts/modules/exporting" разрешается в объект, не являющийся модулем, и его нельзя импортировать с помощью этой конструкции. — JIT-компиляция
  • Не удается найти модуль 'highcharts/modules/export-data'. – компиляция AOT

Я могу обойти это, выполнив

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

как предложено здесь, но после компиляции AOT я получаю "Uncaught ReferenceError: требование не определено" во время выполнения.

Все решения работают нормально на практике, я просто не могу их скомпилировать. Любые предложения приветствуются.


person coconochao    schedule 08.11.2017    source источник


Ответы (2)


Вы можете создать экземпляр Highcharts со всеми модулями, загруженными как HighchartsModule(Highcharts), а затем передать экземпляр функции forRoot, как описано в документы angular2-highcharts.

Вы должны иметь возможность загружать модули, используя require или 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);

и далее так же, как в упомянутых документах:

@NgModule({
    ...
    imports: [
      BrowserModule, 
      ChartModule.forRoot(
-       require('highcharts'),
+       Highcharts
      )
    ],
})
person Kacper Madej    schedule 10.11.2017
comment
Единственная проблема заключается в импорте * как HC_exporting из 'highcharts/modules/exporting'; дает мне, что это разрешает ошибку объекта, не связанного с модулем. - person coconochao; 10.11.2017

На всякий случай, если это кому-нибудь поможет, я не мог сделать это с помощью импорта. Вместо этого мне пришлось включить тег <script src="~/node_modules/highcharts/modules/exporting.js"> в свой HTML. Поскольку этот JS является самовызывающейся функцией, этого достаточно, чтобы заставить ее работать.

person coconochao    schedule 10.11.2017