Targeting named outlet via routerLink adds extraneous "/"

angular modal-dialog angular2-routing router outlet
Brian picture Brian · Feb 7, 2017 · Viewed 15.5k times · Source

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 [email protected] and [email protected] and [email protected] are installed.

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

failed routing attempt

Answer

Brian picture Brian · Feb 7, 2017

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>

Related questions

Angular 2.0 and Modal Dialog

I am trying to find some examples on how to do a Confirmation modal dialog in Angular 2.0. I have been using Bootstrap dialog for Angular 1.0 and unable to find any examples in the web for Angular 2.0. I also checked angular 2.0 …

Read More
Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+)

I am currently working on password reset page of an Angular 4 project. We are using Angular Material to create the dialog, however, when the client clicks out of the dialog, it will close automatically. Is there a way to avoid …

Read More
How to create a modal popup that is compatible with Angular 4

I want to be able to create a popup window which will load a certain Angular 4 component of mine when a radio button is selected. It seems that the methods listed in the answers to this question are only compatible …

Read More