如何使用 angular2-highcharts 和 AOT 编译器导入 exporting.js 和导出-data.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 一起工作，在编译时给我一些 "Error encountered resolving symbol values statically"。

我可以通过

让它工作

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

按照建议 here，但它给了我 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: require is not defined”。

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

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
      )
    ],
})

Answer 2

以防万一这对任何人都有帮助，我无法使用导入来做到这一点。相反，我必须在我的 HTML 中包含 <script src="~/node_modules/highcharts/modules/exporting.js"> 标签。由于这个JS是一个自调用函数，这就是让它工作的全部。

如何使用 angular2-highcharts 和 AOT 编译器导入 exporting.js 和导出-data.js？

How to import exporting.js and export-data.js using angular2-highcharts and AOT compiler?

javascript

highcharts

angular2-aot

angular2-highcharts