Named router outlet not displaying anything

Question

im currently working on an angular project where i need two router outlets, one is the primary outlet for loading main pages and the dashboard page, and the other that i called "mainview" loads the component selected in the sidebar of the dashbaord page (currently only testing with url).

Here's the routing module i created:

import { OrdersComponent } from './pages/orders/orders.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { AuthentificationComponent } from './pages/authentification/authentification.component';
import { IndexComponent } from './pages/index/index.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {path: '', component: IndexComponent, pathMatch: 'full'},


  {path: 'login', component: AuthentificationComponent},
  {path: 'dashboard', component: DashboardComponent},
  {path: 'orders', component: OrdersComponent, outlet: 'mainview'},

  {path: '**', redirectTo: '', pathMatch: 'full'},
];

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

and here's the dashboard page that loads the secondary outlet:

<mat-drawer-container class="example-container">
    <mat-drawer mode="side" opened>
        <app-sidebar></app-sidebar>
    </mat-drawer>
    <mat-drawer-content>
        <router-outlet name="mainview"></router-outlet>
    </mat-drawer-content>
</mat-drawer-container>  

i tried loading the orders components in the mainview page using this url:

http://localhost:4200/dashboard(mainview:orders)

Here's the dashboard page, the white space is where the "mainview" outlet content should display:

but it stays blank, maybe im making an obvious error, but this is my first time working with named router outlets, please let me know how i can get the secondary outlet "mainview" to display the orders component. And thanks

Answer 1

If you're loading the OrdersComponent inside the DashboardComponent then you need to first load the DashboardComponent and then the OrdersComponent. The way you have it set up would only work if the dashboard outlet and the mainview outlet were both in your top level component. For nested router-outlets use the children property.

const routes: Routes = [
  {path: '', component: IndexComponent, pathMatch: 'full'},
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {
        path: 'orders',
        component: OrdersComponent,
        outlet: 'mainview',
      },
    ],
  },
  {path: 'orders', component: OrdersComponent, outlet: 'mainview'},
  {path: '**', redirectTo: '', pathMatch: 'full'},
];

You would navigate like this: http://localhost:4200/dashboard/(mainview:orders)

In this case the outlet name is unnecessary since it's the only router-outlet in the dashboard component.