Angular 6 - 'Function calls are not supported in decorators' 产品构建错误

Question

我目前正在开发一个 Angular 6 应用程序，经过一段时间的开发，当我尝试创建一个产品版本时

ng build --prod

我遇到了这个错误...

ERROR in src\app\app.module.ts(26,17): Error during template compile of 'AppModule'
  Function expressions are not supported in decorators in 'APP_ROOT_STATE'
    'APP_ROOT_STATE' references 'APP_ROOT_STATE'
      'APP_ROOT_STATE' contains the error at src\app\app.component.ts(20,16)
        Consider changing the function expression into an exported function.

经过一些研究，我清楚了这个错误是什么以及如何修复它，但同时，我在 Angular documentation about AOT:

中找到了这个语句

从版本 5 开始，编译器会在发出 .js 文件时自动执行此重写。

这是什么意思？我通过使用最新版本的 Angular and/or Angular Cli 包得到上面的错误。

我应该以某种方式启用此重写吗？有希望在不重写元数据中的所有 lambda 的情况下拥有 AOT 吗？

错误中引用的代码是这个...

export const APP_ROOT_STATE = {
  name: 'app',
  abstract: true,
  views   : {
    header: { component: CoreUiAppHeaderComponent },
    footer: { component: CoreUiAppFooterComponent }
  },
  onEnter: onEnterStateBreadcrumbHelper(new AppBreadcrumbEntryModel('Home', 'default')),
  onExit: onExitStateBreadcrumbHelper(),
  resolve: [
    {
    token: '_appInitialization',
    deps: [AppBootstrapService],
    resolveFn: (bootstrapSvc) => bootstrapSvc.initApplication()
    }
  ]
};

正是这一行...

resolveFn: (bootstrapSvc) => bootstrapSvc.initApplication()

如果我将其重写为一个函数并在那里引用该函数，错误就消失了。像这样...

bootstrapSvcinitApplicationFunction = function(bootstrapSvc) {
  bootstrapSvc.initApplication(); 
}
...
resolveFn: bootstrapSvcinitApplicationFunction

Answer 1

很可能 angular 编译器仅自动重写那些在组件元数据（指令、服务等）中使用的箭头函数，换句话说，仅支持有限的位置。在您的情况下，函数位于其他对象中，因此编译器不知道是否应该重写。

Angular 6 - 'Function calls are not supported in decorators' 产品构建错误

Angular 6 - 'Function calls are not supported in decorators' error in prod build

aot

angular2-aot

angular