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

David picture David · Jun 21, 2016 · Viewed 82.1k times · Source

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

Mark Rajcok picture Mark Rajcok · Jul 9, 2016

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.