Can anyone tell me the flow of router that how it treats the route configuration and nested routes in lazy-loaded modules?

Question

I want my lazy-loaded module in their children components to be parameterizly loaded in one <router-outlet></router-outlet> .

My app.routing.module is

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'reports', loadChildren: () => import('./reports/reports.module').then(m => m.ReportsModule) }
  { path: 'patients', loadChildren: () => import('./patients/patients.module').then(m => m.PatientsModule) },
  { path: 'consultant', loadChildren: () => import('./consultant/consultant.module').then(m => m.ConsultantModule) },
  { path: 'store', loadChildren: () => import('./store/store.module').then(m => m.StoreModule) },
  { path: 'attendence', loadChildren: () => import('./attendence/attendence.module').then(m => m.AttendenceModule) },
  { path: '' , redirectTo : 'dashboard', pathMatch: "full"},  
  { path: '**' ,component: PagenotfoundComponent }
];

app.component.html is

<div id="app">
    <div>
        <div id="sidenav">
            <div id="logo"></div>
            <div routerLink="/dashboard" class="button" routerLinkActive="active">Dashboard</div>
            <div routerLink="/reports" class="button" routerLinkActive="active" >Reports</div>
            <div routerLink="/attendence" class="button"routerLinkActive="active">Attendence</div>
            <div routerLink="/patients" class="button"routerLinkActive="active">Patients</div>
            <div routerLink="/consultant" class="button"routerLinkActive="active" >Consultant</div>
            <div routerLink="/store" class="button"routerLinkActive="active">Store</div>
        </div>
    </div>
    <div id="main">
        <router-outlet></router-outlet>
    </div>
</div>

and report.routing.module.ts is

const routes: Routes = [
{ 
  path: '', component: ReportsComponent,
  children: [{ path : ':d_name' ,component: ReportdetailComponent }]
}];

report.module.ts has one shared module whose component <app-datacard [depart]="depart"></app-datacard> is used and takes data where from parent and displays.As

<p>reports works!</p>
<app-datacard [depart]="depart"></app-datacard>
<router-outlet></router-outlet>

<div class="card">
    <div  #card (click)="navigate(head.d_name)" class="card_child" *ngFor="let head of depart ;index as i">
      <div  *ngFor="let data of head | keyvalue : returnZero">
          <div *ngIf="data.key == 'd_name' ; then thenB; else elseB"></div>
          <ng-template #thenB>
            <h2>{{data.value}}</h2>
          </ng-template>
          <ng-template #elseB>
            <div class="data_detail">
              <div >{{data.key}}</div>
              <div>{{ data.value}}</div>
            </div>
          </ng-template>
      </div>
    </div>
  </div>

data-card.component.ts has router method as

navigate(card){
   this.router.navigate([card], {relativeTo: this.route})
}

which navigates, but when i navigate to their children pagenotfound get displays. AND when I change the configuration order of report.routing.module.ts to

const routes: Routes = [
{ path: '', component: ReportsComponent},
{ path : ':d_name' ,component: ReportdetailComponent }
];

it works but how?

2 AGAIN When I add parameterized route in the app.routing.module.ts and

if add the parameterized route of report.routing.module.ts to app.routing.module.ts as report.module.ts

const routes : Route = [{ path: '', component: ReportsComponent}];

to

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'reports', loadChildren: () => import('./reports/reports.module').then(m => m.ReportsModule) },
  { path : 'reports/:d_name' ,component : ReportdetailComponent },

  { path: 'patients', loadChildren: () => import('./patients/patients.module').then(m => m.PatientsModule) },

again works fine I'm not getting the flow router that gets the route configuration. 3 Is it necessary rule for router that to add <router-outlet></router-outlet> for the lazy-loaded's nested routes?

Answer 1

Your setup is good for the routing.

Just replace this.route.navigate([card], {relativeTo: this.route}) to

this.route.navigate([card], {relativeTo: this.activatedRoute})

So inject ActivatedRoute in your component and replace this.route.

For tour question why does it work, its because your this.router points to base route, and when you navigate to that with param with setup that does not have children, you actually point to correct routing.

As for the <router-outlet></router-outlet>, you need it in parent component to have your children render.

But if your have that error page not found than it should be navigate method problem