如何摆脱 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"
  }

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

原文由 Anis Tissaoui 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这里 提到 Github 问题。以下解决方案对我有用。

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

原文由 Anis Tissaoui 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

一般来说，这是角度问题。 Angular 编译器希望 forRoot 代码是完全静态的。

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

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

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

1. 创建注入令牌：

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

1. 在您的库模块中提供令牌

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

1. 在别处使用 DI 使用令牌：

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

  }
}

原文由 dasfdsa 发布，翻译遵循 CC BY-SA 4.0 许可协议