eagerly loaded module's component is not being displayed in lazy loaded module

Question

i have an app module which has a MasterPageComponent. MasterPage component have typical toolbar,footer,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 {}

so on load i see MasterPageComponent and i see my toolbar,sidenav and footer. MasterPageComponent.html looks like this.

<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>

everything good up-till now. But i have a dashboard module. and you can see in app.module.ts that i am eagerly loading this dashboard module. This dashboard module has a DashPageComponent that shows 6 other components to make a dashboard.

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

i am trying to share this dashboard module between the 2 lazy loaded modules that are mentioned in app.module.ts i want to show "DashPageComponent" which is part of dashboard-module, on empty path '' of both lazy loaded modules. for example in "BankManager" i did this

    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 {}

so when someone should go to localhost:4200/bank-manager it should load DashPageComponent. it has already been eagerly loaded in app.module but i get this error.

Component DashPageComponent is not part of any NgModule or the module has not been imported into your module.

it is already part of dashboard.module's ngModule so whats the problem ?

Answer 1

There is no magical sharing between your modules, and for the use of components, you will need to import the module containing the components each time into the module that will use them.

A good general rule is to remember that

• If the module is imported for components, you'll need to import it in each module that will use them

So, a simple fix for your problem is to add DashboardModule to your BankManagerModule imports array.

An even better way is to structure your application with a SharedModule that can be responsible of declaring and importing / exporting things you need throughout your application. This way, you can simply import the SharedModule instead of having to import separate modules each time.

Have a look at this this article about it!