Angular 2 Adds a trailing slash to a URL with multiple router outputs

Question

I have an application component that has two outputs:

template: '<router-outlet></router-outlet><router-outlet name="popup"></router-outlet>'

I followed the example in this link to create routing and routerLinks, and everything works fine while the routers are inside the application component. However, I created a main layout component with a menu inside so that I could reuse it on all pages and use loadChildren to load the appropriate modules and components inside.

<app-main-menu></app-main-menu>
<h1>
  {{title}}
</h1>
<div class="container">
  <router-outlet></router-outlet>
</div>

The problem is that when I move routerLinks for a popup in the menu, it contains the trailing slash for the main route, and the resulting URL does not work. So for example this routerLink:

<a [routerLink]="[{ outlets: { popup : ['login'] } }]">Login</a>

URL- localhost/mainroute (popup: login), , "localhost/mainroute/(popup: login)", .

url , url : : : 'mainroute'

, -. , URL- localhost/mainroute/', URL- .

- ?

Answer 1

issue, . -, , . , .

- :

<a [routerLink]="['../', { outlets: { popup: 'login' } }]">

:

<a [routerLink]="['/', { outlets: { popup: 'login' } }]">

.

. , , , .