Angular CLI 生产环境构建，未知元素。

Question

在我的主组件的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],
})

这个错误只会在生产模式下出现，而在开发模式下，一切都能够正常运行。

- broodjetom

---

导出所有组件 - alehn96

Answer 1

我已经自己找到了这个问题的答案。显然，这与以下内容有关：

@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: []
})

这对我很有用，因为我有一个包含所有使用的模块和组件的文件，并且它们都在一个单独的常量文件中。配置具有所有使用的模块的数组，entryComponents是所有使用的组件的数组。在主模块中，我导入了这个模块。

- broodjetom