angularmodal-dialogangular2-routingrouteroutlet

Targeting named outlet via routerLink adds extraneous "/"

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...

failed routing attempt

Solution

  • 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>