How to use multiple routes in named outlets (popup popup) in Angular 2?

Question

Angular

It seems that I do everything in accordance with the manual (section Routing and Navigation), it seems that the code matches what they publish in plunker, but it still doesn’t work for me.
in app-routing.module.ts I declare routes:
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:
]
})
in app.component.ts
here is the link that should pop up when clicked:
< a [routerLink]="[{ outlets: { popup: ['compose'] } }]" > Contact < /a >
and outlets :
< router-outlet > < /router-outlet >
< router-outlet name="popup" > < /router-outlet >
The problem is that nothing happens when you click the link!
When you hover over it with the mouse at the bottom left, the link address is shown, that is, the browser generates a link like this:
http : //localhost:3000/user/(popup:compose)
or, for example
, http ://localhost:3000/user/(reports//popup :compose)
depending on which component I place the link in
. It should be like this:
http ://localhost:3000/user(popup:compose)
or so
http://localhost:3000/user/reports(popup:compose)
If you take and paste the correct option into the address bar, then everything is fine, the window appears.
That is, the URL of the link is formed incorrectly.
Who faced the same?