Angular routing to multiple outlets

Issue

I have an application in which I'm trying to route to multiple router outlets. One will be the main page and one will be in a sidenav. The routes are all working, except that nothing is appearing in the sidenav content. The app-module routing is set up like so:

const appRoutes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)}
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The primary router outlet is just the <router-outlet></router-outlet> on a page by itself. The admin module is set up like this:

const adminRoutes: Routes = [
  { path: '', component: AdminComponent },
  { path: 'brands', component: BrandsComponent, outlet: 'admin_content' }
];

@NgModule({
  declarations: [
    AdminComponent,
    BrandsComponent
  ],
  imports: [
    RouterModule.forChild(adminRoutes)
  ]
})
export class AdminModule { }

And the admin router outlet page is:

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav mode="side" opened>
        <div><button mat-icon-button (click)="showBrands()"><mat-icon fontSet="material-symbols-outlined">box_edit</mat-icon></button>Brands</div></mat-sidenav>
    <mat-sidenav-content><router-outlet name="admin_content"></router-outlet></mat-sidenav-content>
</mat-sidenav-container>

The code for showBrands is:

  showBrands(): void {
    this.router.navigate(['admin', {outlets:{ admin_content: ['brands']}}]);
  }

When I click the Brands button, the brands component should show in the admin_content router outlet. The URL changes to http://localhost:4200/admin/(admin_content:brands), but the router outlet stays blank. What am I doing wrong here?

Stackblitz

Solution

If you put <router-outlet name="admin_content"></router-outlet> in the file app.component.html it works, I think it is an architecture problem because you are initializing the route with a lazy load child admin.

https://stackblitz.com/edit/angular-ivy-xvqdcq

Answered By - Diogo Machado