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

Question

I'm using a popup (refering to the docs): https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets

Everything is fine apart from the URL structure:

/domain/subPath/(popup:myopoup)

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

/domain/subPath/popup

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:

.ts

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

.html

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

Answer 1

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 
    }
  ]

Answer 2

That is how Angular handles multiple outlets. I do not think you will be finding a "clean" solution for this. Just dont use name router outlets, then. Have one single router outlet without a name.

[routerLink]="['popup']">

{
  path: 'mypopup',
  component: MyComponent
},

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

Unfortunately, it seems like you do have multiple routers in your project, so this is probably not a solution. I will backup the other commenters when they said there currently is not an easy clean way. I also want a different routing solution, so hopefully we can complain enough that they find a new way.