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

Question

我正在测试 Highcharts Angular2x Wrapper .起初，我使用 Angular CLI (1.6.1)“ng serve”并使用 Chrome 分析性能没有问题。然后，我尝试使用提前编译来查看它对性能有何影响。

所以，使用:

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 将如何为需要外部模块的模块生成工厂代码图书馆。

我得到了这个 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 依赖项:

"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"
  }

我的问题是:我可以在这里做些什么来避免提到的编译错误吗？谁能解释为什么会这样？ (可选)

Answer 1

这通常是 Angular 问题。 Angular 编译器需要 forRoot代码是完全静态的。

例如，在下面的代码中，即使是静态变量的赋值也会导致这个错误:

static forRoot(config: MyConfig): ModuleWithProviders {
    MyConfigService.config = config;// This line with cause an error
    return {
      ngModule: HttpTrackerLibModule,
    };
  }

如果您不是 库创建者，除了尝试上面提到的特定于库的解决方案之外，您无能为力。但是，如果您是库创建者，则可以尝试如下静态方法:

1. 创建注入(inject) token :

   export const USER_OPTIONS = new InjectionToken<MyConfig>('USER_OPTIONS');

2. 在您的库模块中提供 token

static forRoot(config: MyConfig): ModuleWithProviders {
            return {
                ngModule: HttpTrackerLibModule,
                providers: [{
                    provide: USER_OPTIONS,
                    useValue: config
                }],
            };
        }

1. 在其他地方使用 DI 使用 token :

export class ConfigService {
  constructor(@Inject(USER_OPTIONS) private _config: MyConfig) {

  }
}