Proper route configuration for eager loading Grand Child Components Angular 10?

Question

I have three nested modules in my app. app.module -> leaves.module -> balance.module I wan't to eager load the leaves module and balance module. The app works as expected when I have the router configuration for both leaves.module and balance.module in leaves.routing.module. But I want the route configuration for the balance.module in the balance.routing.module.

app.module

@NgModule({
  declarations: [AppComponent, Page404Component, DashboardComponent],
  imports: [BrowserModule, LeavesModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.routing.module

const routes: Routes = [
  { path: "dashboard", component: DashboardComponent },
  { path: "", redirectTo: "dashboard", pathMatch: "full" },
  { path: "**", component: Page404Component }
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: false })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

leaves.module

@NgModule({
  declarations: [
    LeavesComponent,
    ApplyComponent,
    Page404leavesComponent
  ],
  imports: [
    CommonModule,
    BalanceModule,
    LeavesRoutingModule,
  ]
})
export class LeavesModule { }

leaves.routing.module

const routes: Routes = [
  {
    path: "leaves",
    component: LeavesComponent,
    children: [
      {
        path: "apply",
        component: ApplyComponent
      },
      //******HOW TO MOVE CHILD ROUTE CONFIG TO CHILD MODULE ?********* */
      {
        path: "balance",
        component: BalanceComponent,
        children: [
          {
            path: "casual",
            component: CasualComponent
          },
          {
            path: "earned",
            component: EarnedComponent
          },
          {
            path: "",
            redirectTo: "casual",
            pathMatch: "full"
          },
          { path: "**", component: Page404balanceComponent }
        ]
      },
      {
        path: "",
        redirectTo: "apply",
        pathMatch: "full"
      },
      { path: "**", component: Page404leavesComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LeavesRoutingModule {}

balance.module

@NgModule({
  declarations: [
    BalanceComponent,
    CasualComponent,
    EarnedComponent,
    Page404balanceComponent
  ],
  imports: [
    CommonModule,
    BalanceRoutingModule
  ]
})
export class BalanceModule { }

balance.routing.module

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class BalanceRoutingModule {}

When I move the router config of balance.module in to balance.routing.module like follows, the balance.module doesn't render at all and page404leaves is shown.

const routes: Routes = [{
        path: "balance",
        component: BalanceComponent,
        children: [
          {
            path: "casual",
            component: CasualComponent
          },
          {
            path: "earned",
            component: EarnedComponent
          },
          {
            path: "",
            redirectTo: "casual",
            pathMatch: "full"
          },
          { path: "**", component: Page404balanceComponent }
        ]
      }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class BalanceRoutingModule {}

What is the right way to do this? I think in a design perspective, child modules should hold its own routes.

See code on Stackblitz.

Really appreciate your help. Thanks.