如何摆脱 Angular aot 编译中装饰器不支持的函数调用? [英] How to get rid of Function calls are not supported in decorators in Angular aot compiling?

问题描述

我正在测试 Highcharts 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 编译中装饰器不支持的函数调用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！