javascript - 如何使用 angular2-highcharts 和 AOT 编译器导入导出.js 和导出数据.js？

Question

我正在使用 angular2-highcharts，我的图表工作得很好，但我需要将图表导出到 XLS。

我需要做的就是实现这一目标

HighchartsExporting(Highcharts);
HighchartsExportData(Highcharts);

在代码中的某个位置，导出选项将显示在图表中。

问题是如何正确导入 HighchartsExporting 和 HighchartsExportData，因为 standard solution

@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';

按照建议here ，但它给了我两个错误:

• 错误 TS2497:模块“xxxx/highcharts/modules/exporting”已解决到非模块实体，并且无法使用此构造导入。 - JIT 编译
• 找不到模块“highcharts/modules/export-data”。 - AOT 编译

我可以通过这样做来解决这个问题

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

按照建议here ，但是在 AOT 编译之后，我在运行时收到“Uncaught ReferenceError: require is not Define”。

所有解决方案在实践中似乎都工作正常，我只是无法编译它们。欢迎提出任何建议。

Answer 1

您可以创建一个 Highcharts 实例，并像 HighchartsModule(Highcharts) 一样加载所有模块，然后将该实例传递给 forRoot 函数，如下所述在 angular2-highcharts docs .

您应该能够使用 require 或 import 加载模块。

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

或

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

接下来与提到的文档中相同:

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