Named router outlet not working

7
votes

I am trying to use named outlets. In app.routes I have the following path.

{ path: 'home', component: HomeComponent, outlet: 'home' }

app.component.html contains

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

The home outlet never displays the home component. If I remove the outlet name from the router path the unnamed outlet will show the HomeComponent. I am using the latest Angular 2. Any idea why the named outlet doesn't work?

[UPDATE] Here is working plunkr, you only need to look into app.comoponent.ts . If you click the links to Crisis Center or Hereos I would expect the navigated components to appear inside the red named outlet zone?

https://plnkr.co/edit/l2Li0sLbbEIRZCppRlvF?p=preview

Thanks for your help!

2
angular

2 Answers

6
votes

So the problem was that I had to leave the path property empty like this..

{ path: '', component: HomeComponent, outlet: 'home' }
2
votes

Router outlets in Angular 2 are defined as <router-outlet>. Also you should try quotes instead of apostrophes in your HTML template.

In general, if you only have one outlet in your template it is best practice not to give them a name.