急切加载的模块的组件未显示在延迟加载的模块中答案

【问题标题】：eagerly loaded module's component is not being displayed in lazy loaded module急切加载的模块的组件未显示在延迟加载的模块中
【发布时间】：2020-06-19 20:46:51
【问题描述】：

我有一个具有 MasterPageComponent 的应用程序模块。 MasterPage 组件具有典型的工具栏、页脚、sidenav

          const routes: Routes = [
        {
          path: '',
        component: MasterPageComponent
        },
        {
          path: 'bank-manager',
          loadChildren: () => import('./bank-manager/bank-manager.module').then(m => m.BankManagerModule)
        },
        {
          path: 'account-holder',
          loadChildren: () => import('./account-holder/account-holder.module').then(m => m.AccountHolderModule)
        },
        {
          path: '**',
          redirectTo: ''
        }
      ];

      @NgModule({
        declarations: [
          AppComponent,
          MasterPageComponent,
          SidenavComponent,
          ToolbarComponent,
          FooterComponent,
        ],
        imports: [
          HttpClientModule,
          BrowserModule,
          BrowserAnimationsModule,
          MatToolbarModule,
          MatSidenavModule,
          RouterModule.forRoot(routes),
          DashboardModule, // eagerly loading
        ],
        providers: [AuthenticationService],
        bootstrap: [AppComponent]
      })
      export class AppModule {}

加载时我看到 MasterPageComponent，我看到我的工具栏、sidenav 和页脚。 MasterPageComponent.html 看起来像这样。

<div class="container-fluid">
<app-toolbar [inputSideNav]="sideNav"></app-toolbar>
<mat-sidenav-container>
  <mat-sidenav #sideNav mode="side">
    <app-sidenav></app-sidenav>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>
<app-footer></app-footer>

到目前为止一切都很好。但我有一个仪表板模块。你可以在 app.module.ts 中看到我急切地加载这个仪表板模块。这个仪表板模块有一个 DashPageComponent，它显示了 6 个其他组件来制作仪表板。

@NgModule({
  declarations: [
    DashPageComponent,
    TotalBalanceGraphComponent,
    TransfersGraphComponent,
    DepositsGraphComponent,
    DepositsWithdrawalsGraphComponent,
    NotificationsTableComponent,
    TransactionsTableComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [MatTableModule, MatPaginatorModule, MatSortModule]
})
export class DashboardModule {}

我正在尝试在 app.module.ts 中提到的 2 个延迟加载模块之间共享此仪表板模块，我想在两个延迟加载的空路径上显示“DashPageComponent”，它是仪表板模块的一部分模块。例如在“BankManager”中我这样做了

    export const bankManagerRoutes: Routes = [
  {
    path: '',
    component: DashPageComponent,
    children: [
      {
        path: 'manage-accounts',
        component: ManageAccountsComponent
      },
      {
        path: 'create-new-account',
        component: CreateNewAccountComponent
      }
    ]
  }
];

@NgModule({
  declarations: [
    BankManagerComponent,
    CreateNewAccountComponent,
    ManageAccountsComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(bankManagerRoutes),
    MatTableModule,
    MatPaginatorModule,
    MatSortModule
  ]
})
export class BankManagerModule {}

所以当有人访问 localhost:4200/bank-manager 时，它应该加载 DashPageComponent。它已经被热切地加载到 app.module 中，但我收到了这个错误。

Component DashPageComponent 不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中。

它已经是 dashboard.module 的 ngModule 的一部分，所以有什么问题？

【问题讨论】：

您使用的是哪个版本的 Angular？
我使用的是版本 8

标签： angular

【解决方案1】：

您的模块之间没有神奇的共享，对于组件的使用，您每次都需要将包含组件的模块导入到将使用它们的模块中。

一个好的一般规则是记住这一点

如果为组件导入模块，则需要将其导入每个将使用它们的模块

因此，解决您的问题的一个简单方法是将 DashboardModule 添加到您的 BankManagerModule 导入数组中。

更好的方法是使用SharedModule 来构建您的应用程序，该SharedModule 可以负责在整个应用程序中声明和导入/导出您需要的东西。这样，您可以简单地导入SharedModule，而不必每次都导入单独的模块。

看看这个this article about it!

【讨论】：