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

提及Github问题here。以下解决方案对我有用。

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

Answer 2

通常这是角度问题。 Angular编译器希望forRoot代码是完全静态的。

作为示例，在下面的代码中，即使带有静态变量的赋值也会导致此错误：

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

如果您不是库创建者，除了尝试上述特定库解决方案外，您无能为力。但是，如果您是图书馆创建者，则可以尝试以下静态方法：

创建注射令牌：

export const USER_OPTIONS = new InjectionToken<MyConfig>('USER_OPTIONS');
在您的库模块中提供令牌

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

在其他地方使用DI使用令牌：

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

  }
}

Answer 3

我遇到过同样的问题。尝试从getHighchartsModule中删除App.Module.ts导出，并将导出的函数放在自己的文件中。然后将其导入App.Module.ts。

我还没弄清楚为什么会发生这种情况。

Answer 4

如果它可以帮助人们克服错误，我想提出一个额外的答案。我在 Angular 11 上有两个几乎相同的应用程序，它们共享相同的库模块，该模块具有用于自定义注入配置的 static forRoot 方法声明。

@NgModule()
export class TheModule {
  static forRoot(...) {
   ... 
  }
}

App A 按预期工作，App B 抛出了有问题的错误。当然，我的两个应用在本质上是不同的，因此这将其缩小到 infrastructure 或 configuration 差异。

调查

查看共享模块的 compiled 代码，例如the-module.module.d.ts 以查看是否存在差异：

从工作应用程序的范围来看：

// the-module.module.d.ts
import * ...
...

export declare class TheModule {
    static ɵmod: ɵngcc0.ɵɵNgModuleDefWithMeta<TheModule, [typeof ɵngcc4.AComponent, ...]
    static ɵinj: ɵngcc0.ɵɵInjectorDef<TheModule>;
}

注意 emod（模块）和 einj（注入）定义。

来自损坏应用的范围

缺少这些定义：

// the-module.module.d.ts
export declare class TheModule {
}

好的，那么为什么损坏的应用程序的模块是空的！？它必须是编译的东西！查看根 tsconfig.json

对于损坏的应用：

启用了以下 angularCompilerOptions 设置：

// woops, remove this to use the newer compiler for angular versions > 9.0
"angularCompilerOptions": {
    "enableIvy": false
 }

这是前几天遗留下来的。 删除它后，错误消失了，它使编译器能够与共享库模块交互并填充其类型。

在编译 AOT 时，请查看编译器选项文档：https://angular.io/guide/angular-compiler-options 以查看详细信息。 @AngularJs 打印的错误消息将其视为 decorator 是一种“副作用”，并且不相关。

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

4 个答案:

调查