Angular 8.x routing with named outlets

Question

I try to configure routing in angular 8.x application, with lazy loading and named outlets. I have the next configuration:

main-layout.html

<header>
  <app-top-menu></app-top-menu>
</header>
<mat-sidenav-container autosize="true" id="app-main-layout">
  <mat-sidenav opened mode="side">
    <app-left-menu></app-left-menu>
  </mat-sidenav>
  <router-outlet name="toolbar"></router-outlet>
  <div id="app-layout-content">
    <router-outlet></router-outlet>
  </div>
</mat-sidenav-container>

app-router.module.ts

const routes: Routes = [
  {
    path: '', component: MainLayoutComponent, canActivate: [RouteGuardService],
    children: [
      {
        path: 'databases',
        loadChildren: () => import('./feature-modules/database-search/database-search.module')
                              .then(m => m.DatabaseSearchModule)
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

There is a lazy loaded module router:

databases-search-routing.module.ts

const routes: Routes = [
  {
    path: 'index',
    component: DatabaseListComponent,
    children: [
      {
        path: '',
        component: DatabaseListActionsMenuComponent,
        outlet: 'toolbar'
      }
    ]
  },
  {
    path: 'mappings',
    component: MappingsComponent,
    children: [
      {
        path: '',
        component: DatabaseListActionsMenuComponent,
        outlet: 'toolbar'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DatabaseSearchRoutingModule { }

The aim here is to load different toolbar for different views. So /databases/index should load DatabaseListComponent into 'main' router outlet and DatabaseListActionsMenuComponent into named 'toolbar' outlet. However, it is not working.

The main router outlet is populated correctly but the named outlet isn't. I can't figure out what I'm doing wrong.

What is the right configuration for this case?

loadChildren: () => import('./feature-modules/database-search/database-search.module') .then(m => m.DatabaseSearchModule) You can't do that. You can't put functions in the router. — mwilson
@mwilson based on angular documentation angular.io/guide/lazy-loading-ngmodules — thadam

Guerric P Guerric P · Accepted Answer · 2020-01-07T00:13:59

You should try to put the primary outlet routes, and the toolbar outlet routes at the same depth, and have a componentless parent route for both, like this:

const routes: Routes = [{
        path: 'index',
        children: [{
                path: '',
                component: DatabaseListComponent
            }, {
                path: '',
                component: DatabaseListActionsMenuComponent,
                outlet: 'toolbar'
            }
        ]
    }, {
        path: 'mappings',
        children: [{
                path: '',
                component: MappingsComponent
            }, {
                path: '',
                component: DatabaseListActionsMenuComponent,
                outlet: 'toolbar'
            }
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class DatabaseSearchRoutingModule {}

Angular 8.x routing with named outlets

1 Answers