Why Angular 6 component not routed in a lazy loaded module

Question

After hours, and many refactoring, i don't understand why a path in a lazy loaded routing module doesn't run as expected.

Schematically i have a routing module at the top of my app, that load a dashboard module :

  ...
  {
    path: 'dashboard',
    loadChildren: '@app/dashboard/dashboard.module#DashboardModule',
    canActivate: [AuthGuardService]
  },
  ...

DashboardModule imports DashBoardRoutingModule that is defined as :

const routes: Routes = [
  {
    path: '', component: DashboardComponent,
    canActivate: [AuthGuardService],
    children: [
      {path: 'shops', component: ShopListComponent}
    ]
  }
];

I expected that a http://localhost/dashboard/shops will load ShopListComponent but... not at all...

I read some posts relative to this behaviour, but even the component was not inside the module himself, or... demos limit to one route...

What i'm missing ? Checked all my imports and declarations...

Thx

Answer 1

In hello component you are trying this:

<a routerLink="/shops">Boutiques</a>

The path should be:

<a routerLink="/dashboard/shops">Boutiques</a>

Answer 2

我们发现问题是延迟加载的模块中缺少<router-outlet></router-outlet> 。