Angular2 Router error: cannot find primary outlet to load 'HomePage'

Question

I just started using the new routing library (@angular/router v3.0.0-alpha.7) but following the official docs leads to error below:

browser_adapter.ts:74: EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'HomePage' 

Question is - how do I get rid of the error and make the router behave as expected? Have I missed a setting?

(Same error appears when using the alpha.6 version.)

app.component.ts

import { Component } from '@angular/core'; import { ROUTER_DIRECTIVES } from '@angular/router';  @Component({     selector: 'app',     template: `         <p>Angular 2 is running...</p>         <!-- Routed views go here -->         <router-outlet></router-outlet>     `,     providers: [ROUTER_DIRECTIVES] }) export class AppComponent { } 

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router'; import { HomePage } from './pages/home/home';  export const routes: RouterConfig = [     { path: '', component: HomePage } ];  export const APP_ROUTER_PROVIDERS = [     provideRouter(routes) ]; 

home.ts

import { Component } from '@angular/core';  @Component({     template: '<h1>Home Page</h1>' }) export class HomePage { } 

main.ts

/* Avoid: 'error TS2304: Cannot find name <type>' during compilation */ ///<reference path="../../typings/index.d.ts" />  import { bootstrap } from "@angular/platform-browser-dynamic"; import { APP_ROUTER_PROVIDERS } from './app.routes'; import { AppComponent } from "./app.component";  bootstrap(AppComponent, [     APP_ROUTER_PROVIDERS, ]).catch(err => console.error(err)); 

Answer 1

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.

Answer 2

You have an error in your app.component.ts Looks like you declared a directive in the providers array.

import { Component } from '@angular/core'; import { ROUTER_DIRECTIVES } from '@angular/router';  @Component({     selector: 'app',     template: `         <p>Angular 2 is running...</p>         <!-- Routed views go here -->         <router-outlet></router-outlet>         `,      directives: [ROUTER_DIRECTIVES] //here }) export class AppComponent { }