在我的主要组件的html模板中,我使用了我导入的模块中的组件中的元素。当我尝试构建它时,我收到以下错误。
'df-dashboard-widget' is not a known element:
1. If 'df-dashboard-widget' is an Angular component, then verify that it is part of this module.
2. If 'df-dashboard-widget' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
还有这个错误:
ERROR in Template parse errors:
Can't bind to 'options' since it isn't a known property of 'df-dashboard-grid'.
1. If 'df-dashboard-grid' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'df-dashboard-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
我的HTML模板如下所示:
<df-dashboard-grid [options]="options">
<df-dashboard-widget [item]="item" *ngFor="let item of dashboard">
<ng-container *ngComponentOutlet="getComponent(item.tag); injector: getProvider(item)"></ng-container>
</df-dashboard-widget>
</df-dashboard-grid>
我导入了具有df-dashboard-grid
组件的模块,此组件导出。 df-dashboard-widget
也会出现同样的问题。另外一个错误说ngComponentOutlet
不是ng-container
的属性,尽管我从Angular导入了CommonModule
。我的主模块装饰器看起来像这样:
@NgModule({
declarations: [
DashboardComponent
],
imports: [
BrowserModule,
CommonModule,
HttpModule,
DashboardGridModule
].concat(Configuration.initialization.modules),
providers: [],
bootstrap: [DashboardComponent]
})
带有组件装饰器的已使用模块如下所示:
@NgModule({
declarations: [
DashboardGridComponent,
DashboardWidgetComponent,
DashboardGuideComponent,
DashboardPreviewComponent
],
imports: [
CommonModule
],
exports: [DashboardGridComponent, DashboardWidgetComponent],
})
此错误仅在生产模式下发生。在开发模式中,一切正常。
答案 0 :(得分:0)
我自己找到了这个问题的答案。显然它与此有关:
@NgModule({
declarations: [
DashboardComponent
],
imports: [
BrowserModule,
CommonModule,
HttpModule,
DashboardGridModule
].concat(Configuration.initialization.modules),
providers: [],
bootstrap: [DashboardComponent]
})
在我的配置文件中,我也使用了一系列模块(因为原因)。在装饰器(或至少是主模块的装饰器)中,即使它返回有效的数据类型,也不允许在装饰器内部具有任何功能。
我通过添加另一个名为ImportModule
的模块解决了这个问题。
@NgModule({
declarations: [],
imports: Configuration.initialization.modules,
exports: Configuration.entryComponents,
providers: [],
bootstrap: []
})
这对我有用,因为我有一个文件,所有使用过的模块和组件都在一个单独的常量文件中。 Configuration包含所有已使用模块的数组,entryComponents是所有已使用组件的数组。在主模块中,我导入了这个模块。