Named router outlet not working

Question

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!

score 6 · Accepted Answer · answered Oct 14 '16 at 13:38

6

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

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

answered Oct 14 '16 at 13:38

doorman

15,707
22
80
145

4

It's good that you answered your own question, but it would be better if you included a bit of explanation as to why this is the best answer. – Daniel Griscom Nov 08 '16 at 00:33
Related: https://stackoverflow.com/questions/51207124/angular-6-router-repeating-html https://stackoverflow.com/questions/39277700/angular-2-duplicate-header https://stackoverflow.com/questions/40198685/angular2-routing-loading-twice . I also think the app router component can be auto-generated so that most people don't encounter this issue? – mittens pair Jul 06 '18 at 22:21
This answer solved my problem but can you please explain why this solution works? Also, add `pathMatch: 'full'` – Verma Aman Nov 17 '20 at 18:18

score 2 · Answer 2 · answered Oct 12 '16 at 12:50

2

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.

answered Oct 12 '16 at 12:50

Alexander Ciesielski

10,506
5
45
66

Sorry about the router-outlet naming it was a spelling mistake in the question. I tried the quotes instead of apostrophes but without luck. I do need two outlets in the app.component template. – doorman Oct 12 '16 at 13:10
2

As far as I know one unnamed `` is mandatory (instead of "best practice") – Günter Zöchbauer Oct 12 '16 at 13:11
Without more code on your router configuration and your logic it is hard to help you. – Alexander Ciesielski Oct 12 '16 at 13:12
Hi thanks for your help, please see the updated question with a working plunkr – doorman Oct 12 '16 at 13:59

Named router outlet not working

2 Answers2