Angular 2 Router - Named outlets

Question

The documentation is not very good, but I am trying to have different router outlets on the same page/route.

I have this in my app.component.html

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

My app.routes.ts

{
    path: '',
    component: HomeComponent,
    outlet: 'primary'
},
{
    path: '',
    component: DashboardComponent,
    outlet: 'dashboard'
},
{
    path: '**',
    redirectTo: '404'
}

So on my startpage (i.e "example.com", not "example.com;dashboard:dashboard") I want to show the Homecomponent in the primary router outlet and my Dashboardcomponent in the Dashboard outlet. That worked with ngrs/router, but since it's deprecated I am trying to migrate. Is it possible without the ;dashboard:dashboard in angular/router?

With this configuration I am beeing redirected to 404. I have also tried this with no luck:

{
    path: '',
    component: HomeComponent,
    children: [
        {
            path: '',
            component: DashboardComponent,
            outlet: 'dashboard'
        }
    ]
},

Have anyone managed to get named router outlets working?

UPDATE Regarding to the migration notes from ngrx/router to angular/router you should be able to have this:

{
    path: 'blog',
    component: HomeComponent,
    outlet: 'main'
},
{
    path: 'blog',
    component: RegisterComponent,
    outlet: 'dashboard'
}

But when I go to example.com/blog, I get this error in the console:

Error: Cannot match any routes: 'blog'

https://github.com/ngrx/router/blob/master/docs/overview/migration.md

Yeah sorry, but do you know if it's possible to even do this? without having alot of things in the url. If I have 4 router outlets on the startpage, I dont want the url to look like this: example.com(dashboard:dashcmp)(menu:troll)(footer:extralongfooter) etc.. — Kungen, Aug 26 '16 at 12:06
I'm pretty sure there is no way around showing these parts in the URL. — Günter Zöchbauer, Aug 26 '16 at 12:13
you might be running into an issue with the way angular resolves which route object to use. ["The router uses a first-match wins strategy when matching routes"](https://angular.io/docs/ts/latest/guide/router.html#!#Configuration). It's buried in the docs (which doesn't support hash linking, *of course*), but if you search for that quote you should find it. Maybe having sibling routes with the same path is causing an issue? — worc, Oct 04 '16 at 21:47
I agree that the documentation about the router outlets is a mess. But for a good documentation they want you to buy: https://leanpub.com/router — Pascal, Oct 09 '16 at 21:49

score 3 · Answer 1 · answered Oct 07 '16 at 13:51

3

Try this configuration:

{
    path: 'wrap',
    component: HomeComponent,
    children: [
        {
            path: 'dash',
            component: DashboardComponent,
            outlet: 'dashboard'
        }
    ]
}

with:

this.router.navigateByUrl('/wrap(dashboard:dash)');

I don't know why needs an url fragment (like the "wrap" I added) but it works...

and the others:

{
    path: 'blog',
    component: HomeComponent,
    outlet: 'main'
},
{
    path: 'blog',
    component: RegisterComponent,
    outlet: 'dashboard'
}

with:

this.router.navigateByUrl('/(main:blog)');
this.router.navigateByUrl('/(dashboard:blog)');

answered Oct 07 '16 at 13:51

Fabrizio De Bortoli

448
5
16

it did not ork for me. would it be possible to rpovide a plunker – Aniruddha Das Oct 17 '16 at 21:00
Thanks for the plunker. its working for me now. I want to do the same in this.router.navigate() method. can I do the same thing? – Aniruddha Das Oct 18 '16 at 14:24
1

I updated plnkr with `this.router.navigate(['', { outlets: { dashboardoutlet: 'dashboard' } }]);` – Fabrizio De Bortoli Oct 18 '16 at 14:33
1

is there a way I can load outlets when by default my '' routing will be calling. I mean I need to fill the named outlets in my initial call? – Aniruddha Das Oct 18 '16 at 18:24
Got it. Now my named routing is working fine. thanks – Aniruddha Das Oct 19 '16 at 06:56

score 3 · Answer 2 · answered Feb 13 '18 at 10:13

3

This is what I ended up using to get it to work:

       this.router.navigate([{ outlets: { detail: ['summary'] } }], 
                            { skipLocationChange: true, relativeTo: this.route });

Note: I don't have a '' for my parent path. There seem to be a number of github issues related to '' as a parent path but not sure if they apply.

answered Feb 13 '18 at 10:13

Simon_Weaver

140,023
84
646
689

1

what is `this.route`? private instance of `ActivatedRoute`? – Ashwin Jul 30 '19 at 11:35

Angular 2 Router - Named outlets

2 Answers2

Linked