在功能模块的组件中使用应用程序模块的组件

Question

我试图将角度源重构为多个特征模块。以前，源仅具有一个模块，并且所有组件都在该单个模块内声明。为了进行重构，我执行了以下步骤：

1. 创建了功能模块

2. 将组件从应用程序模块移动到功能模块。添加了 声明列表和导出列表中功能模块中的组件。

3. 从应用程序模块中删除了已移动组件的引用

4. 将功能模块导入到应用程序模块中。

源代码已编译，但站点未加载。在控制台上，我可以看到它崩溃，因为功能模块中的html组件使用了app模块中的组件。

我认为在功能模块中使用来自应用程序模块的组件不需要任何额外的步骤。我想念什么吗？

已添加： HTML下面是来自移动的组件（我从应用程序模块移动到功能模块的组件），该组件使用在应用程序模块中声明的app-organization-user-search组件。

<div class="col-md-12 full-width py-2">
        <app-organization-user-search (addClicked)="addParticipant($event)" (cancelClicked)="addingParticipants = false"></app-organization-user-search>

已添加： 对于所有正在寻找特定问题答案的人，解决方案都在接受答案的注释中。

Answer 1

要将一个模块拆分为多个模块，您应该注意正确导出和导入所有模块和组件：

app.module.ts *“ root”模块

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    // angular
    BrowserModule,
    HttpClientModule,
    // splitted modules
    DiversityMattersModule,
    PreventingAirPolutionModule,
    PeacfullyRevolutionModule,
    // ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

diversity-matters.module.ts 上面列表中的示例模块

@NgModule({
  imports: [
    // ...
  ],
  declarations: [
    AwesomeComponent,
    // ...
  ],
  exports: [
    AwesomeComponent,
    // ...
  ],
})

现在允许依赖AppComponent的每个组件导入AwesomeComponent。