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 my login component in the modal outlet. Something like this:

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

This is possible to do by using horrible auxiliary URLs like /home(modal:login), but of course no one wants their URLs to look like that.

How do I solve this without these URLs?

Answer 1

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'.

Answer 2

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 modal to something more user friendly like popup:

/home(popup:login)

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