Angular 2 - Named Routers Without Terrible URLs

Question

I want to have two routers, a primary and a fashionable outlet. When I switch to, /loginI want to show my home component in the main outlet and my input component in the modular outlet. Something like that:

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

This can be done using horrible auxiliary URLs such as /home(modal:login), but, of course, no one wants their URLs to look like this.

How to solve this problem without these URLs?

Answer 1

Why don't you go on fewer routes,

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

, /login, HomeComponent , LoginComponent "modal".