Angular 4 lazy load module doesn't work with named child outlet

Question

I am trying to implement lazy loading for a module. This module has a bunch of child routes with a unique outlet name . This doesn't seem to work when I try to visit the routes.

This can be seems from this example that I saved: https://plnkr.co/edit/NNXAoZItM00RIIxzemts?p=preview

You can see that I have the child route set to

  { path: 'list',    component: HeroListComponent, outlet: 'abc' },

in hero-routing.module.ts

and router outlet to:

 <router-outlet name="abc"></router-outlet> 

in hero.component.ts

I should be able to visit localhost:3000/heroes/(abc:list) when I am running it locally, but it doesn't seem to work.

Note: You can run the plunker example locally by download the zip file and running npm install then npm start.

Answer 1

The child routes do not seem to work with default unamed routes.

Change the lazy loaded module routes to include a redirect from default unamed route to a named route.

const routes: Routes = [
  { path: '',   redirectTo: 'start', pathMatch: 'full' },
  { path: 'start', component: HeroComponent,
    children: [
      { path: 'list',    component: HeroListComponent, outlet: 'abc' },
      { path: ':id', component: HeroDetailComponent }
    ]
  }
];

Finally change the navigation link for 'heroes' lazy loaded module to include the named outlet information. Be sure to specify the complete url as '/heroes/start', do not leave it to the default '/heroes'.

<a [routerLink]="['/heroes/start',{outlets: {abc:['list']}}]"  
routerLinkActive="active">Heroes</a>