[英]How to get rid of Function calls are not supported in decorators in Angular aot compiling?
[英]Angular 6 Prod Function calls are not supported in decorators but '..Module' was called
尝试使用 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
我没有错误,但我似乎无法在提供者属性中注入框架
正如另一个答案所说,这是 AOT 的问题。 在像@NgModule
这样的装饰器中调用的函数必须适合编译器的静态分析。 确切的必要条件是棘手的,因为它们取决于许多因素和使用的库和工具的版本。
当有问题的函数在您拥有的库中时,就有采取行动的空间。 例如,在我的情况下,我决定从函数中删除所有局部变量,将其简化为复杂表达式的单个 return 语句,除了已知可以工作的RouterModule.forRoot
外,没有任何函数调用。 例如,参见 Angular Flex Layout 项目中的提交“make withConfig AOT compatible” 。 在tsconfig.lib.json
使用 angular 编译器选项也被一些评论者记录在 Angular 的 GitHub 问题上。
但是,在您的情况下,您似乎无法控制有问题的模块和功能。 您绝对应该将其报告给模块的开发人员。
使用 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{}
我有类似的问题,我用下面的代码修复了它。
// @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);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.