如何使用angular2-highcharts和AOT编译器导入exporting.js和export-data.js？ [英] How to import exporting.js and export-data.js using angular2-highcharts and AOT compiler?

问题描述

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

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.

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

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

不适用于AOT，给我一些编译时解决符号值时遇到的错误

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建议此处，但它给了我2个错误：

as suggested here, but it gives me 2 errors:

• 错误TS2497：Module'xxxx / highcharts / modules / exporting'将
  解析为非模块实体，无法导入 - JIT编译


• 无法找到模块'highcharts / modules / export-data'。 - AOT编译

• 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');

建议>，但是在AOT编译之后，我得到了未捕获的ReferenceError：require不是定义。

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

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

推荐答案

为了防止这种情况对任何人有用，我无法使用导入操作。相反，我必须在我的HTML中包含< script src =〜/ node_modules / highcharts / modules / exporting.js> 标签。由于这个JS是一个自我调用函数，所以它只需要它就可以工作。

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.

这篇关于如何使用angular2-highcharts和AOT编译器导入exporting.js和export-data.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！