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
I'm pretty sure there is no way around showing these parts in the URL. — Günter Zöchbauer
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". 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
I agree that the documentation about the router outlets is a mess. But for a good documentation they want you to buy: leanpub.com/router — Pascal

Fabrizio De Bortoli Fabrizio De Bortoli · Accepted Answer · 2016-10-07T13:51:37

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)');

Angular 2 Router - Named outlets

2 Answers