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

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));

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.

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 {
}

It should be directives metadata instead of providers,

directives: [ROUTER_DIRECTIVES]

I am experiencing this error randomly and only when I publish on the live server. I have never experienced this when working locally. When I say randomly, sometimes it works fine, when I refresh for example, it throws that error mentioned above and just showing symbols on the screen. I am working on Angular 2.

Any guidance / help will be much appreciated.

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

Related

Recent Posts