Error del enrutador Angular2: no se puede encontrar la salida principal para cargar 'HomePage'

Acabo de comenzar a usar la nueva biblioteca de enrutamiento (@ angular / router v3.0.0-alpha.7) pero seguir los documentos oficiales conduce al error a continuación:

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

La pregunta es: ¿cómo me deshago del error y hago que el enrutador se comporte como se esperaba? ¿Me he perdido un ajuste?

(Aparece el mismo error cuando se usa la versión alpha.6).

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

Tiene un error en su app.component.ts Parece que declaró una directiva en la matriz de proveedores.

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

Aunque @JS_astronauts ya proporcionó una solución, creo que sería instructivo explicar el error ...

La salida primaria se establece cuando un análisis sintácticos angular HTML plantilla y se encuentra Directiva sobre RouterOutlet , es decir, cuando se encuentra de selección de RouterOutlet: <router-outlet></router-outlet>.

Aunque su plantilla contiene <router-outlet></router-outlet>, su componente no contiene directives: [ROUTER_DIRECTIVES], por lo que Angular no buscará ninguna de las directivas definidas por esa constante:

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

Entonces, cuando Angular analiza las plantillas HTML de AppComponent, si no las reconoce <router-outlet></router-outlet>, simplemente las ignora. Más tarde, cuando Angular intenta representar el componente de ruta predeterminado (HomePage), se queja porque no sabe dónde colocarlo.

Este error también puede ocurrir si tiene un error tipográfico en su selector de elementos, por ejemplo:

<roter-outlet></roter-outlet>

En este caso, incluso si su directivesmatriz está configurada correctamente, Angular nunca encontrará el <router-outlet>elemento requerido .

Debería ser en directives metadatalugar de providers,

directives: [ROUTER_DIRECTIVES]

Estoy experimentando este error aleatoriamente y solo cuando publico en el servidor en vivo. Nunca había experimentado esto cuando trabajaba localmente. Cuando digo al azar, a veces funciona bien, cuando actualizo, por ejemplo, arroja ese error mencionado anteriormente y solo muestra símbolos en la pantalla. Estoy trabajando en Angular 2.

Cualquier orientación / ayuda será muy apreciada.