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

I was having same error due to missing template of `''` This may be due to typo error too in `''` — Rajiv Bhardwaj, May 04 '17 at 06:52

Mark Rajcok · Answer 1 · 2017-03-01T19:01:09.060

86

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.

edited Mar 01 '17 at 19:01

answered Jul 09 '16 at 16:55

Mark Rajcok

362,217
114
495
492

Just a note for anyone using later versions: 'directives' property of @Component has been removed in RC6. http://stackoverflow.com/questions/39658186/angular-2-component-directive-not-working – Will Apr 24 '17 at 11:57
Re typo in your element selector: Or if your template is simply missing the tag all together... – Joshua Drake May 15 '17 at 19:34
1

Another Note: if you're copy and pasting, it should say `` . It's missing the `u` in beginning and end tags – ntgCleaner May 16 '17 at 13:31
Shame that the correction from roter to router doesn't minimum character change requirements – aland Jun 24 '17 at 17:14

KB_ · Accepted Answer · 2016-06-21T18:05:24.703

72

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

edited Jun 21 '16 at 18:05

answered Jun 21 '16 at 17:59

KB_

2,113
2
26
28

3

My error got resolved as I added `` . Not getting error even when I don't have `directives: [ROUTER_DIRECTIVES]` in @Component section. – Rajiv Bhardwaj May 04 '17 at 06:55
1

ROUTER_DIRECTIVES is no more relevant for angular 2. https://angular.io/docs/ts/latest/guide/router.html – Dipendu Paul May 25 '17 at 12:03

score 7 · Answer 3 · answered Jun 21 '16 at 18:02

7

It should be directives metadata instead of providers,

directives: [ROUTER_DIRECTIVES]

answered Jun 21 '16 at 18:02

micronyks

54,797
15
112
146

score 1 · Answer 4 · answered Mar 06 '19 at 13:02

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'

4 Answers4

Linked