Заполните mat-sidenav компонентом, основанным на маршруте

Question

Я пытаюсь динамически изменять содержимое компонента mat-sidenav в зависимости от маршрута. В настоящее время у меня есть такая структура:

Основной макет

<mat-sidenav-container>
    <mat-sidenav>
        <router-outlet name="side"></router-outlet>
    </mat-sidenav>
    <mat-sidenav-content>
        <toolbar></toolbar>
        <div class="content">
            <router-outlet></router-outlet>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

И у меня есть компонент, который загружается в выход основного маршрутизатора с выходом дочернего маршрутизатора:

Панель управления

<div class="dashboard">
  <router-outlet></router-outlet>
</div>

Так, например, у меня есть такая конфигурация маршрута:

AppRoutes

{
  path: 'dashboard',
  loadChildren: () => import('./features/dashboard/dashboard.module').then(m =>m.DashboardUserModule)
}

DashboardRoutes

export const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    children: [
      {
        path: ':id',
        loadChildren: () => import('@features/overview-survey/overview-survey.module').then(m => m.OverviewSurveyModule),
        data: { leftSidenav: true }
      }
    ]
  },
  {
    path: ':id',
    component: SidenavEditComponent,
    outlet: 'side'
  }
];

Проблема в том, что компонент боковой панели не загружается в компонент mat-sidenav в основном макете. Я что-то делаю не так или есть другой способ добиться того, что я делаю?