Маршруты не могут быть сопоставлены при использовании нескольких выходов router и routerLink

Question

Я не могу получить ссылку на работу в своем приложении Angular 2.

Моя страница состоит из двух частей: заголовок и содержание под ним. Две части моделируются маршрутизаторами-выходами каждой. Когда я нажимаю на ссылку, обычно я хочу изменить заголовок и содержимое. Поэтому я попытался использовать routerLink и определить местоположение ссылки для каждого выхода, как <a [routerLink]="[{ outlets: { primary: '/content', header: '/header' }}]">link</a>,

К сожалению, ссылка не работает. На консоли маршрутизатор выдает следующую ошибку:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '/content'
Error: Cannot match any routes. URL Segment: '/content'
    at ApplyRedirects.noMatchError (router.js:1760)
    at CatchSubscriber.eval [as selector] (router.js:1725)
    at CatchSubscriber.error (catchError.js:105)
// ... Many more lines

Кроме того, мне было интересно, если ссылка даже анализируется правильно. При проверке HTML ссылка выглядит так: <a ng-reflect-router-link="[object Object]" href="//content(header:/header)">link</a>

Интересно, что я делаю не так, и я ценю вашу помощь!

Вот настройки:

app.module.ts

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { ContentComponent } from './content/content.component';
import { LinkComponent } from './link/link.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        ContentComponent,
        LinkComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
<router-outlet name="header"></router-outlet>
<router-outlet></router-outlet>`,
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
}

приложение-routing.module.ts

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

import { LinkComponent } from './link/link.component';
import { ContentComponent } from './content/content.component';
import { HeaderComponent } from './header/header.component';

const routes : Route[] = [
    {
        path: '',
        component: LinkComponent
    },
    {   path: 'content',
        component: ContentComponent
    },
    {
        path: 'header',
        component: HeaderComponent,
        outlet: 'header'
    }
];

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

ссылка /link.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-link',
    template: `
<p>I am the <a [routerLink]="[{ outlets: { primary: '/content', header: '/header'}}]">link</a>.</p>`
})
export class LinkComponent { }

заголовок /header.component.ts

import { Component } from '@angular/core';

@Component({
        selector: 'app-header',
        template: '<p>I am the header.</p>'
})
export class HeaderComponent { }

содержание /content.component.ts

import { Component } from '@angular/core';

@Component({
        selector: 'app-content',
        template: '<p>I am the content.</p>'
})
export class ContentComponent { }

Я использую версию 5.2.8 Angular.

$ ng --version

Angular CLI: 1.6.7
Node: 9.4.0
OS: linux x64
Angular: 5.2.8
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.7
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.7
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0