Angular 2 - Named router outlets without horrible URLs

Question

I want to have two router outlets, the primary one, and a modal outlet. When navigating to /login, I want to show my home component in the primary outlet, and m

Answer 1

You can pass NavigationExtras with skipLocationChange: true to hide the ugly url for your users.

const navigationExtras: NavigationExtras = {
  skipLocationChange: true,
};
this.router.navigate([{ outlets: { modal: 'popup' } }], navigationExtras);

---

You can also rename the name of your router outlet from model to something more user friendly like popup:

/home(popup:login)

But then again, maybe that is not pretty enough :D

Answer 2

FYI, we encountered the same problem and solved it according to this response: https://stackoverflow.com/a/58915611/9260456

Answer 3

Why don't you go for component less routes,

{
    path: 'login',
    children: [
        {
            path: '',
            component: HomeComponent
        },
        {
            path: '',
            component: LoginComponent,
            outlet: 'modal'
        }
    ]
}

This will make sure that when your route is /login, HomeComponent will go in primary outlet and LoginComponent will go to router-outlet with name 'modal'.