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

Question

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 1

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.