Targeting named outlet via routerLink adds extraneous "/"

Question

I'm trying to launch a modal in my app via routing. Everything seems to work except that an extra slash is added to the URL that prevents it from resolving. The Url should look like this (and it works if I enter it manually)...

/accounts(modal:accounts/1/edit)

but i'm getting this instead (notice the slash between the base url and outlet target)...

/accounts/(modal:accounts/1/edit)

The base tag is set...

<head>
  <meta charset="utf-8">
  <title>myApp</title>
  <base href="/">
  ...
</head>

Here's my routing config (accounts-routing.module.ts)

const ACCOUNT_ROUTES: Routes = [
  {
    path: 'accounts',
    component: AccountsIndexComponent
  },{
    path: 'accounts/new',
    component: AccountsNewComponent
  },{
    path: 'accounts/:id',
    component: AccountsShowComponent
  },{
    path: 'accounts/:id/edit',
    component: AccountsEditComponent,
    outlet: 'modal'
  }
];

And outlet (app.component.html)

<router-outlet></router-outlet>
<router-outlet name="modal"></router-outlet>

And the link...

<a [routerLink]="[{ outlets: { modal: ['accounts', account.id, 'edit'] } }]">Edit</a>

What am I missing? The project was created using angular-cli@1.0.0-beta.26 and angular@2.4.6 and angular-router@3.4.6 are installed.

FWIW, here's a screenshot of the logs...

As the first child of the ``-tag? I think your problem might be with how relate paths are resolved. — unitario, Feb 07 '17 at 17:23
Yes, it's in the `` tag. The HTML was generated by angular-cli and I haven't touched it. I tried to moving it to be the first child of the `` but that didn't seem to make any difference — Brian, Feb 07 '17 at 17:36
routerLink is relative to where it is used (/accounts/ if inside of that component and /accounts if outside of it). Try a relative path: `` — unitario, Feb 07 '17 at 18:01
I tried the relative path you suggested and it gives me a route of `//(modal:accounts/1/edit)`. So, i tried `['', { outlets: { modal: ['accounts', account.id, 'edit'] } }]` and that works! That doesn't feel like a good solution to me though? — Brian, Feb 07 '17 at 18:33
Nah, it should be fine. Now you are using an absolute path. Did you try `./`? — unitario, Feb 07 '17 at 18:48
I did, `./` gives me the same path i was seeing initially. Thx for the help! — Brian, Feb 07 '17 at 19:22

score 45 · Accepted Answer · answered Feb 07 '17 at 19:25

45

The fix was to define an empty relative path on the link. Thanks to @unitario for pointing me in the right direction!

<a [routerLink]="['', { outlets: { modal: ['accounts', account.id, 'edit'] } }]">Edit</a>

answered Feb 07 '17 at 19:25

Brian

1,363
3
12
26

In our application we have an authentication modal that can open over any view so any initial path caused issues, either by loosing the current route or by adding extra slash. This solved the issue, Thank you! the only thing added is queryParamsHandling="merge" to facilitate passing parameters to the modal and the underlying view `Log in` – Greg Mar 06 '18 at 19:47

Targeting named outlet via routerLink adds extraneous "/"

1 Answers1

Linked