装饰器不支持 Angular 6 Prod 函数调用，但调用了“..Module”答案

【问题标题】：Angular 6 Prod Function calls are not supported in decorators but '..Module' was called装饰器不支持 Angular 6 Prod 函数调用，但调用了“..Module”
【发布时间】：2018-12-30 17:35:50
【问题描述】：

尝试使用 angular2-json-schema-form & build in prod 时出现此错误

“DemoModule”模板编译期间出现错误装饰器不支持函数调用，但调用了“JsonSchemaFormModule”。我发现错误来自：

@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 属性中注入框架

【问题讨论】：

标签： javascript angular typescript angular6-json-schema-form ajsf

【解决方案1】：

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

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

但是，在您的情况下，您似乎无法控制有问题的模块和功能。您绝对应该向模块的开发人员报告。

【讨论】：

警告：在我的案例中，生成的单个 return 语句需要支持 cmets 和空白以使其再次可读。快速、简单的修复，只是不要忽视你的开发伙伴！
一年多了，我想知道这个问题是否已经在最新的 Angular 版本中得到处理

【解决方案2】：

我在使用 aot = true 构建时遇到了同样的问题。首先你必须加载模块 Bootstrap4FrameworkModule。

我找到的解决方法：

import { JsonSchemaFormModule, Bootstrap4FrameworkModule, JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService } from 'angular2-json-schema-form';

@NgModule({
declarations: [
  testComponent
],
import:[
  testRoutingModule,
  Bootstrap4FrameworkModule.forRoot(), {
            ngModule: JsonSchemaFormModule,
            providers: [
                JsonSchemaFormService, FrameworkLibraryService,
                WidgetLibraryService,
            ]
        }

}),
export class testModule{}

【讨论】：

【解决方案3】：

我有类似的问题，我用下面的代码修复了它。

// @dynamic
@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatSnackBarModule
  ]
})
export class VrWidgetsModalModule {
  static forRoot(durationTime: number, position: VrWidgetsModalPositionEnum): ModuleWithProviders {
    return {
      ngModule: VrWidgetsModalModule,
      providers: [
        {provide: VrWidgetsModalService, useFactory: modalFactory, deps: [MatSnackBar, 'DURATION_TIME', 'POSITION']},
        {provide: 'DURATION_TIME', useValue: durationTime},
        {provide: 'POSITION', useValue: position}
      ]
    };
  }
}

export const modalFactory = (modal: MatSnackBar, durationTime: number, modalPosition: VrWidgetsModalPositionEnum) => {
  return new VrWidgetsModalService(modal, durationTime, modalPosition);
};

【讨论】：