Angular2 Router error: cannot find primary outlet to load ‘HomePage’

by

Although @JS_astronauts already provided a solution, I think it would be instructive to explain the error…

The primary outlet is set when Angular parses an HTML template and finds directive RouterOutlet, i.e., when it finds RouterOutlet’s selector: <router-outlet></router-outlet>.

Although your template does contain <router-outlet></router-outlet>, your component does not contain directives: [ROUTER_DIRECTIVES], so Angular won’t look for any of the directives defined by that constant:

export const ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkWithHref, 
 RouterLinkActive];

So when Angular parses AppComponent’s HTML templates, if it doesn’t recognize <router-outlet></router-outlet> so it just ignores it. Later, when Angular tries to render the default route component (HomePage), it complains because doesn’t know where to put it.

This error can also happen if you have a typo in your element selector, e.g.:

<roter-outlet></roter-outlet>

In this case, even if your directives array is set correctly, Angular will never find the required <router-outlet> element.

More Related Contents:

  1. RouterModule.forRoot(ROUTES) vs RouterModule.forChild(ROUTES)
  2. Angular2 conditional routing
  3. Can I get today’s date plus one month in moment js? [duplicate]
  4. angular-cli server – how to proxy API requests to another server?
  5. Changing the page title using the Angular 2 new router [duplicate]
  6. How do I support Internet Explorer in an Angular 8 application?
  7. Passing data into “router-outlet” child components
  8. Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘tr’ (final release)
  9. How to decrease prod bundle size?
  10. Wait for Angular 2 to load/resolve model before rendering view/template
  11. Dynamic routing based on external data
  12. Access environment variables in production build Angular 4
  13. Handling refresh tokens using rxjs
  14. How to use/import http module?
  15. What is let-* in Angular 2 templates?
  16. What is the read parameter in @ViewChild for
  17. Angular 2 – Routing – CanActivate work with Observable
  18. Angular 2: How to write a for loop, not a foreach loop
  19. Invert Angular 2 *ngFor
  20. angular’s ng-init alternative in Angular 2
  21. Cannot read property “totalPrice” of undefined
  22. How to check the length of an Observable array
  23. Property ‘toPromise’ does not exist on type ‘Observable’
  24. TypeError: Object prototype may only be an Object or null: undefined Angular 8
  25. How to call scrollIntoView on an element in angular 2+
  26. How do I get experimental ngTemplateOutlet to work?
  27. Page transition animations with Angular 2.0 router and component interface promises
  28. Inject Http manually in Angular 2
  29. Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat ‘C:\DumpStack.log.tmp
  30. Filtering specific column in Angular Material Table with filtering in angular?

Leave a Comment