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