title: Angular 8 Nested Routing using Children and respective Route Modules upto three level not working
body: <p>I have a sample demo app with three levels of <strong>nested routing</strong> </p>
  
  <p><strong>Check Stackblitz</strong> <a href="https://stackblitz.com/edit/angular-nested-routing-with-modules" rel="nofollow noreferrer">here</a></p>
  
  <p>level one navigation links</p>
  
  <pre><code>-Dashboard
  -My Profile
  -My Attendance
  -My leaves ---&gt;
  
          -Apply Leave
          -Check Leave Balance -----&gt;
  
                            -Casual
                            -Earned
                            -Bad Link
  </code></pre>
  
  <p><strong>Problem</strong>: Last two links (Casual and Earned) should show respective components but showing "<em>pnf404leave works!</em>" and even if not found it should show "<em>pnf404balance works!</em>"</p>
  
  <p>Have three routing module.ts files</p>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code> //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 { } 
  </code></pre>
  
  <p><strong>leaves-routing.module.ts</strong></p>
  
  <pre><code>//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 { }
  </code></pre>
  
  <p><strong>balance-routing.module.ts</strong></p>
  
  <pre><code>//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 { }
  </code></pre>