Угловой материал приложения с логином и базовыми sidenav

Question

У меня есть приложение с компонентом входа в систему, компонентом панели мониторинга, который содержит базовый mat-sidenav-контейнер угловой материал и еще два компонента.В mat-sidenav я установил два элемента routerLink для двух компонентов.Как мне настроить app-routing для отображения компонентов в mat-sidenav-content?Моя маршрутизация приложений выглядит следующим образом:

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthguardService],
    children: [
      { path: 'first', component: FirstComponent},
      { path: 'second', component: SecondComponent}
    ]
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    component: LoginComponent
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

А это мой компонент панели инструментов:

<mat-sidenav-container class="example-container">
  <mat-sidenav mode="side" opened>
    <mat-nav-list>
      <a mat-list-item routerLink='/first'>First Component</a>
      <a mat-list-item routerLink='/second'>Second Component</a>
      <a mat-list-item (click)="onLogOut()">Log out</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Answer 1

Я только что удалил косую черту '/' из routerLink в шаблоне компонента приборной панели, и это сработало:

<a mat-list-item routerLink='first'>First Component</a>
<a mat-list-item routerLink='second'>Second Component</a>