Angular2 Router: Cannot find primary outlet to load 'HomeComponent'

angular angular2-router angular2-router3
Thorsten Viel picture Thorsten Viel · Jul 6, 2016 · Viewed 24.8k times · Source

tried to switch to new Router as in version "@angular/router": "3.0.0-beta.2" in combination with "@angular/*": "2.0.0-rc.4", following the official docs on the ComponentRouter.

However, I'm facing an issue when trying to load my App with the default HomeComponent:

Cannot find primary outlet to load 'HomeComponent'

It seems this has to do with using templateUrl and an external html file instead of using the inline template style.

HomeComponent is initially not shown in Window and the error is printed to the console. However, when I use the link to Home Component it gets shown second hand.

As soon as I change from

templateUrl: 'home.html'

to

template: '<router-outlet></router-outlet>'

error is gone, HomeComponent is shown and routing works as expected.

Is that a known issue? Does it work for someone using templateUrl? Is there something I have to respect to get it work?

Answer

Thorsten Viel picture Thorsten Viel · Jul 6, 2016

The problem was, that due to an app loading screen, the <router-outlet></router-outlet> did not exist sometimes yet, due to a race condition. If you need to hide the html part containing the outlet, use [hidden] instead of *ngIf, to ensure the outlet is always in the DOM and not removed conditionally.

Related questions

Do I have to unsubscribe from ActivatedRoute (e.g. params) observables?

I find many examples where ActivatedRoute Observables like params or url are subscribed but not unsubscribed. constructor(private route: ActivatedRoute) {} ngOnInit() { this.route.params // (+) converts string 'id' to a number .switchMap((params: Params) => this.service.getHero(+params['id'])) .subscribe((…

Read More
Angular: append query parameters to URL

Im using this: import { HttpParams } from '@angular/common/http'; let params = new HttpParams(); params.append('newOrdNum','123'); But this is not working, i dont append param in url. Any suggestion?

Read More
What is the difference between ActivatedRoute and ActivatedRouteSnapshot in Angular4

What is the difference between ActivatedRouteSnapshot and ActivatedRoute in Angular 4? It's my understanding that ActivatedRouteSnapshot is a child of ActivatedRoute, meaning that ActivatedRoute contains ActivatedRouteSnapshot. Incidentally, I tried running a Google search for an answer to this question, but I …

Read More