javascript - 装饰器不支持 Angular 6 Prod 函数调用，但调用了 '..Module'

Question

尝试在产品中使用 angular2-json-schema-form 和构建时出现此错误

ERROR in Error during template compile of 'DemoModule' Function calls are not supported in decorators but 'JsonSchemaFormModule' was called. I found out that the the error comes from:

@NgModule({
  declarations: [ AceEditorDirective, DemoComponent, DemoRootComponent ],
  imports: [
    BrowserModule, BrowserAnimationsModule, FlexLayoutModule, FormsModule,
    HttpClientModule, MatButtonModule, MatCardModule, MatCheckboxModule,
    MatIconModule, MatMenuModule, MatSelectModule, MatToolbarModule,
    RouterModule.forRoot(routes),

    NoFrameworkModule, MaterialDesignFrameworkModule,
    Bootstrap3FrameworkModule, Bootstrap4FrameworkModule,

    JsonSchemaFormModule.forRoot(   // the source of the Error
      NoFrameworkModule,
      MaterialDesignFrameworkModule,
      Bootstrap3FrameworkModule,
      Bootstrap4FrameworkModule
    )
  ],
  bootstrap: [ DemoRootComponent ]
}) 

在库的源代码中，他们使用这样的东西:

export class JsonSchemaFormModule {
  static forRoot(...frameworks): ModuleWithProviders {
    const loadFrameworks = frameworks.length ?
      frameworks.map(framework => framework.forRoot().providers[0]) :
      [{ provide: Framework, useClass: NoFramework, multi: true }];
    return {
      ngModule: JsonSchemaFormModule,
      providers: [
        JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService,
        ...loadFrameworks
      ]
    };
  }
}

当我删除变量 loadFramworks 时，我没有错误，但我似乎无法在 providers 属性中注入(inject)框架

Answer 1

正如其他答案所说，这是 AOT 的问题。在像 @NgModule 这样的装饰器中调用的函数必须能够被编译器进行静态分析。确切的要求很棘手，因为它们取决于许多因素以及所使用的库和工具的版本。

当有问题的功能在您拥有的库中时，就有采取行动的余地。例如，在我的例子中，我决定从函数中删除所有局部变量，将其简化为复杂表达式的单个返回语句，除了已知有效的 RouterModule.forRoot 之外没有函数调用。参见示例 the commit "make withConfig AOT compatible"在 Angular Flex Layout 项目中。在 tsconfig.lib.json 中使用 Angular 编译器选项也被 Angular 的 GitHub 问题上的一些评论者记录下来。

不过，在您的情况下，您似乎无法控制有问题的模块和函数。您绝对应该将其报告给模块的开发人员。