19

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?

Rap
  • 6,851
  • 3
  • 50
  • 88
Thorsten Viel
  • 1,199
  • 1
  • 10
  • 18
  • Can you show component metadata for home component looks like you are giving relative URL but not setting moduleid. moduleId: module.id. http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html – Arpit Agarwal Jul 06 '16 at 13:58
  • Sure I can: `@Component({ selector: 'app', directives: [ ROUTER_DIRECTIVES ], templateUrl: '/app/components/app/app.html' })` and `@Component ({ selector: 'start.home', directives: [], templateUrl: '/app/components/start/page.home.html' })` so that should not be an issue – Thorsten Viel Jul 06 '16 at 14:18
  • Template URL does work. It is some setup issue are your sure u added router directive and router outlets at correct place. Provide a plunker – Arpit Agarwal Jul 06 '16 at 16:23
  • Yes. Worked in a Plunkr. – Thorsten Viel Jul 06 '16 at 17:56
  • ROUTER_DIRECTIVES in `@Component({directives: [AnimatedImages, ROUTER_DIRECTIVES]})` is defiantly needed, since it solves the outlet tag – Mahmoud Hboubati Aug 06 '16 at 16:34
  • @MahmoudHboubati ROUTER_DIRECTIVES have been deprecated. – Standaa - Remember Monica Oct 29 '16 at 15:28

1 Answers1

28

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.

Thorsten Viel
  • 1,199
  • 1
  • 10
  • 18