Search code examples
angularrouter-outlet

angular router outlet fails with routerLink outside AppComponent

I use angular 5.2.0 and I navigated to: 

/page/28/1

corresponding to:

{path: 'page/:albumId/:pageNo', component: AlbumPageComponent}

The AlbumPageComponent html contains:

<a class="nav-link" [routerLink]="[{ outlets: { popup: ['login'] } }]">

corresponding to:

{path: 'login', component: LoginComponent, outlet: 'popup'}

and supposed to be used with <router-outlet name="popup"></router-outlet> placed into the classical app.component.html (it's a simple angular cli generated project).

This doesn't work because the wrong formed path as I noticed it in console:

NavigationStart(id: 3, url: '/page/28/1/(popup:login)')

But does work when used this way:

<a class="nav-link" [routerLink]="" (click)="goToLogin()">

with AlbumPageComponent having:

goToLogin() {
  this.router.navigate([{outlets: {popup: ['login']}}]);
}

The correct path then is formed:

NavigationStart {id: 3, url: "/page/28/1(popup:login)"}

Please be aware that the routing command is the same for both situations, meaning: 

[{outlets: {popup: ['login']}}]

Q: what is wrong with the routerLink approach? how could it be fixed?

PS: I also use: "baseHref": "/albums/" in .angular-cli.json though I see no reason for this to be an issue

EDIT

The same happens to the example from https://angular.io/guide/router#wrap-up-and-final-app. In order to replicate you'll have to copy the <a/> for Contact to CrisisCenterComponent html. This way, and also as I do, one would use [routerLink] approach inside a different component than AppComponent. Directly used in AppComponent html the [routerLink] approach works.

Solution

  • Try this format:

    <a class="nav-link" [routerLink]="['', { outlets: { popup: ['login'] } }]">

    Actually, taken from here: https://stackoverflow.com/a/42098257/6528560