CODEWITHSUNDEEP
angularroutes
Dvora
Dvora

Reputation: 1175

Angular Routing using navigation - children and loadChildren cannot be used together

My Main component template looks like this:

<app-navigation></app-navigation>

<div class="container-fluid">
  <router-outlet></router-outlet>
</div>

And this is the navigation:

   <div >
  <a routerLink="/home" routerLinkActive="active" >Home</a>
  <a  routerLink="/doctors" routerLinkActive="active" >
    Doctors
  </a>
  <a  routerLink="/health" routerLinkActive="active" >
    Health
  </a>
</div>

app.routing.ts

export const appRoutes: Routes = [

  {
    path: 'doctors',
    loadChildren: () => import('./doctore/doctore.module').then(m => m.DoctoreModule)
  },
  {
    path: 'health',
    loadChildren: () => import('./health/health.module').then(m => m.HealthModule),
  },
  {
    path: '**',
    component: NotFoundPageComponent
  }
];

Doctors components has a list of doctors, and upon selecting one of them, the app should route to a child component DoctorDetailsComponent, with path doctors/{id}

     <mat-cell [routerLink]="['/doctors', row.id]" routerLinkActive="active">
            {{row.description}} </mat-cell>

If I set the routing to be like this:

  {
    path: 'doctors',
    loadChildren: () => import('./docspace/docspace.module').then(m => m.DocspaceModule),
    children: [{path: ':id', component: DoctorsDetailsComponent}]   
  },

I get an error:

Invalid configuration of route 'doctors': children and loadChildren cannot be used together

Upvotes: 3

Views: 3885

Answers (2)

Dvora
Dvora

Reputation: 1175

I Handled it in the specific module routing ts.

Upvotes: 0

JsNgian
JsNgian

Reputation: 835

If DoctorsDetailsComponent is inside DocspaceModule Then

{
    path: 'doctors',
    loadChildren: () => import('./docspace/docspace.module').then(m => m.DocspaceModule),   
  },

and in DocspaceRoutingModule

 const routes: Routes = [
   {
     path: '',
     component: DoctorSpaceComponent,
     children: [
       { path: '', redirectTo: ':id', pathMatch: 'full' } 
       { path: ':id', component: DoctorsDetailsComponent }
     ]
   }
 ];

DoctorSpaceComponent.html

    <router-outlet></router-outlet>

Upvotes: 4

Related Questions