Javascript 如何消除aot编译中decorators不支持的函数调用？

我正在测试Angular2x。起初，我在使用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 { }

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

我的问题是： 我可以在这里做些什么来避免提到的编译错误吗？

---

有人能解释为什么会发生这种情况吗？（可选）

我遇到了同样的问题。尝试从

App.Module.ts

中删除

getHighchartsModule

导出，并将导出的函数放入自己的文件中。然后将其导入

App.Module.ts

---

我还没有弄明白为什么会发生这种情况。

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

---

这通常是一个角度的问题。角度编译器希望

forRoot

代码是完全静态的

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

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

如果您不是库创建者，那么除了尝试上述库特定的解决方案之外，您别无选择。但是，如果您是库创建者，您可以尝试以下静态方法：

创建注入令牌：

export const USER_OPTIONS=new InjectionToken（'USER_OPTIONS'）

在库模块中提供令牌

static forRoot（配置：MyConfig）：ModuleWithProviders{
返回{
ngModule:HttpTrackerLibModule，
供应商：[{
提供：用户选项，
useValue:config
}],
};
}

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

静态forRoot

方法声明

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

应用程序A按预期工作，应用程序B抛出了有问题的错误。 当然，我的两个应用在本质上是不同的，所以这就把它缩小到了基础设施或配置的差异

调查 查看共享模块的

编译的

代码，例如

模块.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>;
}

好的，那么为什么坏掉的应用程序的模块是空的！？一定是编译的问题！查看根

tsconfig.json

对于已损坏的应用程序：

已启用以下

angularCompilerOptions

设置：

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

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

编译AOT时，请查看编译器选项文档：以查看详细信息。

---

@AngularJs打印的错误消息，将其视为

装饰程序

是一个“副作用”，与此无关。

我已经遇到了这个错误，它与胖箭头函数有关。在你的情况下，我不知道，对不起…@trichetriche我在decorator的Providers属性的arrow函数中遇到了这个错误，我在解决它时遇到了麻烦。这个不同：（这就是使用HighChartsModule的方法吗？你不能用

forRoot

做些别的事情吗？require也不应该用在Typescript中，所以也许你可以在这个基础上找到一个解决方法？我不是javascript或angular方面的专家，我需要一些解释，这样我才能找到一个解决方法。等待救世主……哦，好吧，在在这种情况下，！我实际上解决了这个问题，但仍然没有找到问题的根源。一旦找到了答案，我将发布一个答案。请参阅上面的答案。这也可能是一个根本原因，具体取决于编译设置、tsconfig中的angularCompilerOptions。

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