Угловой: несколько выходов маршрутизатора

Question

Я пытаюсь добавить несколько выходов маршрутизатора в мое приложение без какой-либо удачи. Ниже мой код

app.routing.module.ts

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import {LoginComponent} from './login/login.component';
import {DashboardComponent} from './dashboard/dashboard.component';
import { AuthenticationGuardService } from './service/AuthenticationGuardService';
import { HomeComponent } from './home/home.component';
import { SearchComponent } from './search/search.component';

const routes:Routes = [
  { path: 'login', component: LoginComponent},
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent, outlet: 'viewport' /*, canActivate: [AuthenticationGuardService]*/ },
  { path: 'search', component: SearchComponent, outlet: 'viewport'}
];

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

home.component.ts

<ul class="menu-list">
  <li (click)="navigate($event, 'dashboard')" class="data-menu-option-selected">DASHBOARD</li>
  <li (click)="navigate($event, 'search')">SEARCH</li>
  <li (click)="navigate($event, 'reports')">PDIF REPORTS</li>
  <li (click)="navigate($event, 'apps')">PENNDOT APPS</li>
</ul>
....
....
<div class="viewport-body">
  <router-outlet name="viewport"></router-outlet>
</div>
....
....

home.component.ts

private navigate(event, path):void {

    if(this.previousSelection != null) {
      this.previousSelection.removeAttribute('class');
    }
    event.target.setAttribute('class', 'data-menu-option-selected');
    this.previousSelection = event.target;

    // this.router.navigate([{outlets: {primary: 'home', viewport: path}}]);

    this.router.navigate([{ outlets: { viewport: [ path ] }}]);
    // this.router.navigateByUrl('/home(viewport:dashboard)');
  }

Я использую угловой 5.2.11, а версия модуля маршрутизации - 5.2.11.

Когда я нажимаю на элемент списка, URL меняется с http://localhost:4200/home на http://localhost:4200/home(viewport:dashboard), но в названной розетке маршрутизатора ничего не отображается.

Я также не вижу ошибок в консоли.

Может кто-нибудь сказать мне, что мне не хватает?

EDIT: Я пытаюсь разработать экран, как показано ниже. Когда пользователь нажимает на любой элемент списка с левой стороны, соответствующий элемент должен открываться в правом разделе.