angular 2中ChartModule的产品构建问题

Question

我尝试用production标志来构建我的应用程序，我得到了一个类似下面这样的错误。

Error: Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'require'. Consider exporting the symbol (position 38:13 in the origi
nal .ts file), resolving symbol AppModule in C:/Users/fs/Desktop/venky/new futures/futures-services latest/src/app/app.module.ts

这个错误是因为我使用了used require highcharts，而且我不被允许直接使用ChartModule

ChartModule.forRoot(require('highcharts'),require ('../../node_modules/highcharts/highcharts-more.js'))

我关注了这篇文章，我没有收到任何错误，但我的图表没有显示。帮我解决这个问题。

Angular 2 - AOT - Calling function 'ChartModule', function calls not supported

这就是我为了成功构建产品而做的事情

import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import { ChartModule } from 'angular2-highcharts';
declare var require: any;
export function highchartsFactory() {
    var hc = require('highcharts');
    var hcm = require('highcharts/highcharts-more');
    hcm(hc);
    return hc;
}

providers: [
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule

Answer 1

对于同样的问题，我的解决方案如下：

• 包括您在index.html中所需的highcharts脚本(在systemjs.config脚本之前或在build.js之前的Aot中)。例如：

​

    <script src="../node_modules/highcharts/highcharts.js"></script>
    <script src="../node_modules/highcharts/highcharts-more.js"></script>
    <script src="../node_modules/highcharts/modules/solid-gauge.js"</script>

​

• 这将在浏览器的窗口对象上创建一个名为Highcharts的对象，从那里你可以在你的Angular模块中使用它：

从“angular2-highcharts/dist/index”导入{ ChartModule }；从‘angular2-highcharts/dist/HighchartsService’导入{ HighchartsStatic }；导出函数highchartsFactory() { return (window).Highcharts；} @NgModule({ imports: BrowserModule，HttpModule，ChartModule，声明: AppComponent，providers：{ provide: HighchartsStatic，useFactory: highchartsFactory }，bootstrap: AppComponent })导出类AppModule { }

Rollup不能正确处理像import 'highcharts-more.js‘这样的非普通导入。它只能处理从‘Module’导入{ module}；