Angular 8 Nested Routing using Children and respective Route Modules upto three level not working

Question

I have a sample demo app with three levels of nested routing

Check Stackblitz here

level one navigation links

-Dashboard
-My Profile
-My Attendance
-My leaves --->

        -Apply Leave
        -Check Leave Balance ----->

                          -Casual
                          -Earned
                          -Bad Link

Problem: Last two links (Casual and Earned) should show respective components but showing "pnf404leave works!" and even if not found it should show "pnf404balance works!"

Have three routing module.ts files

app-routing.module.ts

 //app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './profile/profile.component';
import { AttendanceComponent } from './attendance/attendance.component';
import { Page404Component } from './page404/page404.component';
import { LeavesComponent } from './leaves/leaves.component';
import { BalanceModule } from './leaves/balance/balance.module';
import { LeavesModule } from './leaves/leaves.module';

const routes: Routes = [
    { path: 'dashboard', component: DashboardComponent },
    { path: 'profile', component: ProfileComponent },
    { path: 'attendance', component: AttendanceComponent },
    { path: 'leaves', component: LeavesComponent },
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: '**', component: Page404Component },
];
@NgModule({
    imports: [
        BalanceModule,
        LeavesModule,
        RouterModule.forRoot(routes,{ enableTracing: true })
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { } 

leaves-routing.module.ts

//leaves-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ApplyComponent } from './apply/apply.component';
import { BalanceComponent } from './balance/balance.component';
import { LeavesComponent } from './leaves.component';
import { PNF404leaveComponent } from './pnf404leave/pnf404leave.component';


const routes: Routes = [
  {
    path: 'leaves', component: LeavesComponent, children: [
      {
        path: 'apply', component: ApplyComponent
      },
      {
        path: 'balance', component: BalanceComponent
      },
      {
        path: '', redirectTo: 'apply', pathMatch: 'full'
      },
      { path: '**', component:  PNF404leaveComponent}
    ]
  }
];

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

balance-routing.module.ts

//balance-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BalanceComponent } from './balance.component';
import { CasualComponent } from './casual/casual.component';
import { EarnedComponent } from './earned/earned.component';
import { PNF404balanceComponent } from './pnf404balance/pnf404balance.component';


const routes: Routes = [
  {
    path: 'balance', component: BalanceComponent, children: [

      {
        path: 'casual', component: CasualComponent
      },
      {
        path: 'earned', component: EarnedComponent
      },
      {
        path: '', redirectTo: 'casual', pathMatch: 'full'
      },
      { path: '**', component:  PNF404balanceComponent}
    ]
  }
];

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

Answer 1

all of your routes are actually at the same level.

@NgModule({
    imports: [
        BalanceModule,
        LeavesModule,
        RouterModule.forRoot(routes,{ enableTracing: true })
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { } 

your three routing modules are imported in here and router searches for routes sequentially starting from first to last. which means whenever router tries to make a match it searches routes in the following order; 1. BalanceRoutinModule 2. LeavesRoutingModule 3. AppRoutingModule

when you enter leaves/balance/casual router matches first part to path: 'leaves', component: LeavesComponent in LeavesRoutingModule and matches second part to path: 'balance', component: BalanceComponent again in LeavesRoutingModule and when it tries to match third part it cannot make a match in LeavesRoutingModule so it falls to path: '**', component: PNF404leaveComponent LeavesRoutingModule

since BalanceRouting have balance path at the top and LeavesRouting have leaves at the top, router tries to match them from beginning of the path. so;

in BalanceRoutingModule changing this line

path: 'balance', component: BalanceComponent, children: [

to this

path: 'leaves/balance', component: BalanceComponent, children: [

makes casual and earned routes work but as you said in comment, they gets rendered in wrong router-outlet

in order to make them get rendered in correct outlet, then balance related config should go into LeavesRouting as follows;

const routes: Routes = [
  {
    path: 'leaves', component: LeavesComponent, children: [
      {
        path: 'apply', component: ApplyComponent
      },
      {
        path: 'balance', component: BalanceComponent, children: [

          {
            path: 'casual', component: CasualComponent
          },
          {
            path: 'earned', component: EarnedComponent
          },
          {
            path: '', redirectTo: 'casual', pathMatch: 'full'
          },
          { path: '**', component: PNF404balanceComponent }
        ]
      },
      {
        path: '', redirectTo: 'apply', pathMatch: 'full'
      },
      { path: '**', component: PNF404leaveComponent }
    ]
  }
];

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

here is a working demo https://stackblitz.com/edit/angular-nested-routing-with-modules-p96odh

also this might seem complicated. and since you created different routing modules i understand you want to delegate routing configuration to child modules. in this case best thing to do would be using lazy-loading as follows;

1. lazy load LeavesModule in AppRoutingModule

{ path: 'leaves', loadChildren: () => import(`./leaves/leaves.module`).then(m => m.LeavesModule) },

2. lazy load BalanceModule in LeavesRoutingModule

{ path: 'balance', loadChildren: () => import(`./balance/balance.module`).then(m => m.BalanceModule) },

here is the implementation

https://stackblitz.com/edit/angular-nested-routing-with-modules-v8q9sy