Named router outlet doesn't render template in lazy loaded route

Question

I have a problem with my angular 8 app, not rendering into a named router-outlet.

The routes are:

routes.module:

const routes: Routes = [
    ...
    {
        path: 'settings', loadChildren: './settings/settings.module#SettingsModule', canActivate
    },
]

settings.module

RouterModule.forChild([
  {
    path: '', component: SettingsComponent
  },
  {
    path: 'profile', component: ProfileComponent, outlet: 'settings_o'
  },
  {
    path: 'users', component: UsersComponent, outlet: 'settings_o'
  }
])

settings.component.html

<nav mat-tab-nav-bar color="primary" class="bg-whitesmoke primary">
<span mat-tab-link
   *ngFor="let link of navLinks"
   [routerLink]="[{outlets: {settings_o: [link.link]}}]"
   routerLinkActive #rla="routerLinkActive"
   [active]="rla.isActive">
  {{link.label}}
</span>
</nav>
<router-outlet name="settings_o"></router-outlet>

When I click a link, the url in the address bar changes (e.g. to http://localhost:4200/settings/(settings_o:profile)), but no content is rendered to settings_o, nor do the components get loaded. There is no error in the console.

link.link is, for example simply profile like in settings.module's routes.

What do I need to change?

score 2 · Answer 1 · answered Jan 09 '20 at 17:14

This is a known bug which has been discussed a lot: https://github.com/angular/angular/issues/10981

As far as I know it hasn't been solved completely but there are workarounds: https://github.com/angular/angular/issues/10981#issuecomment-454425220

You should give the lazy loaded module a default route and define the child routes for the components that you would like to open in the named outlet, for example:

RouterModule.forChild([
  {
    path: "default",
    component: SettingsComponent,
    children: [
      { path: "profile", component: ProfileComponent,outlet: "settings_o" },
      { path: "users", component: UsersComponent, outlet: "settings_o" }
    ]
  }
]);

Of course you have to change the navigation to the SettingsComponent accordingly: routerLink='/settings/default'

I made a Stackblitz which is not an exact copy of your code but which shows how it can be solved: https://stackblitz.com/edit/angular-nctjpv

By the way, in your original solution, if you placed the named router outlet in the root component, I think it would display the child component but in the wrong place.

Named router outlet doesn't render template in lazy loaded route

1 Answers1