Angular <router-outlet name="popup"> change URL path structure?


I’m using a popup (refering to the docs):

Everything is fine apart from the URL structure:


How can I change this default structure with parenthesis?
I would like it to be as follows:


In other words, I want to remove the brackets including the colon inside the URL.

Inside their documentation the popup also appears in that manner (with brackets)

Here is some code:


  path: 'mypopup',
  component: MyComponent,
  outlet: 'popup'


<a [routerLink]="[{ outlets: { popup: ['mypopup'] } }]">Contact</a>
<router-outlet name="popup"></router-outlet>


you can use URL serializer, to change url structure

import { UrlTree ,DefaultUrlSerializer, UrlSerializer } from '@angular/router';

export class cleanUrlSerializer extends DefaultUrlSerializer {  
public parse(url: string): UrlTree {
    function cleanUrl(url) {
        return url.replace(/\(|\)/g,'') // for example to delete parenthesis
    return super.parse(cleanUrl(url));

import this class and add it as provider in your module

 providers: [
        provide: UrlSerializer,
        useClass: cleanUrlSerializer 

Answered By – Fateh Mohamed

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.