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?

Strange guess from your outlet's name tells me that you are using the second router-outlet for showing modal, how about using this approach instead: http://blog.brecht.io/Modals-in-angular2/ ? — Harry Ninh, Sep 27 '16 at 13:46
This might have been a bad example, but I want to be able to say: "For this path, open component a in outlet a, and component b in outlet b" — adamfinstorp, Sep 27 '16 at 13:54
If you want to use the Angular Router with more than one router-outlet, you have to put up with those urls. There's no way around it because the Router and the URL are basically married. — Federico Pettinella, Sep 27 '16 at 14:59
@FedericoP I really don't understand why having a single path defining content for two outlets is not possible. That doesn't mean we have to break the relation between the url and the router. They would still be working together, it's just for this path I'm saying two outlets with two components will be used. — Jens, Apr 09 '18 at 14:16

score 10 · Answer 1 · answered Feb 12 '17 at 19:08

10

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

answered Feb 12 '17 at 19:08

jigar gala

1,600
12
20

2

This looks like two different routes with the same path pointing to different outlets. It makes sense. However, I don't understand why the component less route is necessary. Why can't I have just two routes sharing the `login` path each pointing to a different outlet? – Jens Apr 09 '18 at 15:24
Amazing! With this route refactoring both routes are triggered by default with the same clean url. Have you an explanation for this trick? – Fabio Formosa Jun 30 '20 at 14:20

score 0 · Answer 2 · answered Nov 18 '19 at 13:29

0

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

answered Nov 18 '19 at 13:29

mitschmidt

496
3
11

Wilt · Answer 3 · 2022-09-23T18:51:54.883

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

Angular 2 - Named router outlets without horrible URLs

3 Answers3

Linked