Routes cannot be matched when using multiple router-outlets and routerLink

Question

I cannot get a link to work in my Angular 2 application.

My page consists of two parts: a header and the content below that. The two parts are modeled by a router-outlets of each. When I click on the link, usually I want to change both the header and the content. So I tried to use a routerLink and define the link location for each outlet like <a [routerLink]="[{ outlets: { primary: '/content', header: '/header' }}]">link</a>.

Unfortunately, the link does not work. On the console, the router throws the following error:

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

Also, I was wondering if the link is even parsed correctly. When inspecting the HTML, the link looks like this: <a ng-reflect-router-link="[object Object]" href="//content(header:/header)">link</a>

I wonder what I am doing wrong, and I appreciate your help!

Here's the setup:

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';
}

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/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/header.component.ts

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

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

content/content.component.ts

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

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

I use version 5.2.8 of 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