Angular aot编译中的装饰器不支持如何摆脱函数调用？

问题描述

我正在测试 Angular2x 。首先，我使用Angular CLI（1.6.1）ng serve并使用Chrome分析性能时没有任何问题。然后，我尝试使用提前编译来查看它对性能的影响。

I am testing a Highcharts Angular2x Wrapper. At first, I had no problem using Angular CLI (1.6.1) "ng serve" and profiling performance with Chrome. Then, i tried to use ahead-of-time compiling to see how that affects the performance.

所以，使用：

ng serve --aot

我得到了以下错误：

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'ChartModule' was called.

现在，我知道aot为模块生成工厂代码，并以某种方式转换模板到VanillaJS，事情这里有点棘手，我无法理解ngc将如何为需要外部库的模块生成工厂代码。

Now, i know that aot generates factory code for modules and somehow "transformes" templates to VanillaJS, things get a bit tricky here and i couldn't understand how ngc is going to generate factory code for a module that requires an external library.

我得到了这个App.Module。 ts：

I got this App.Module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartModule } from 'angular2-highcharts';

import { AppComponent } from './app.component';

declare var require: any;
export function getHighchartsModule() {
  return  require('highcharts');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ChartModule.forRoot(getHighchartsModule) // This causes the error
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的Package.json依赖项：

My Package.json dependencies :

"dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "angular2-highcharts": "^0.5.5",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  }

我的问题是：
有没有我可以在这里做以避免上述编译错误？
有谁能解释为什么会这样？ （可选）

My questions are :Is there anything i can do here to avoid the mentioned compiling error ?Can anyone explain why does this happen ? (optional)

推荐答案

提及Github问题。以下解决方案适用于我。

Mentioning the Github issue here. The following solution worked for me.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Angular Highcharts Imports
import {HighchartsStatic} from 'angular2-highcharts/dist/HighchartsService'; 
import { ChartModule } from 'angular2-highcharts';

// Factory Function
export function highchartsFactory() {
  var hc = require('highcharts');
  return hc;
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ChartModule // Import Module Here
  ],
  providers: [ // Provide Service Here
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory 
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这篇关于Angular aot编译中的装饰器不支持如何摆脱函数调用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！