Как использовать multiple routes in named outlets (всплывающее окно popup) в Angular 2?

Question

[Konstantin]

Вроде делаю все в соответствии с оф.руководством (раздел Routing and Navigation), вроде код совпадает с тем, что они публикуют в plunker, но у меня все равно не работает.
в app-routing.module.ts я объявляю роуты:
const tbRoutes: Routes = [
{
path: 'compose',
component: ComposeMessageComponent,
outlet: 'popup'
},
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent },
];

@NgModule({
imports: [
RouterModule.forRoot(tbRoutes)
],
exports: [
RouterModule
]
})
в app.component.ts
вот ссылка, нажатии которой должно появляться всплывающее окно:
< a [routerLink]="[{ outlets: { popup: ['compose'] } }]" > Contact < /a >
и аутлеты:
< router-outlet > < /router-outlet >
< router-outlet name="popup" > < /router-outlet >

Проблема в том, что при нажатии ссылки ничего не происходит!
Когда наводишь на нее мышью внизу слева показывается адрес ссылки, то есть браузер формирует ссылку вида:

h t t p : //localhost:3000/user/(popup:compose)
либо например
h t t p ://localhost:3000/user/(reports//popup:compose)
в зависимости от того, в каком компоненте размещаю ссылку
Должно быть так:
h t t p ://localhost:3000/user(popup:compose)
либо так
h t t p ://localhost:3000/user/reports(popup:compose)

Если взять и вставить в адресную строку правильный вариант, то все норм, окно появляется.

То есть неправильно формируется URL ссылки

Кто сталкивался с таким же?