Błąd routera Angular2: nie można znaleźć gniazda głównego, aby załadować stronę główną

Właśnie zacząłem korzystać z nowej biblioteki routingu (@ angular / router v3.0.0-alpha.7), ale postępowanie zgodnie z oficjalną dokumentacją prowadzi do błędu poniżej:

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

Pytanie brzmi - jak pozbyć się błędu i sprawić, by router zachowywał się zgodnie z oczekiwaniami? Czy przegapiłem ustawienie?

(Ten sam błąd pojawia się podczas korzystania z wersji alfa 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));

Masz błąd w swoim app.component.ts Wygląda na to, że zadeklarowałeś dyrektywę w tablicy dostawców.

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

Chociaż @JS_astronauts dostarczył już rozwiązanie, myślę, że pouczające byłoby wyjaśnienie błędu ...

Podstawowym wylot jest ustawiany, gdy kątowe Analizuje HTML szablonu i znajduje dyrektywa RouterOutlet , to znaczy, gdy stwierdzi, selektor RouterOutlet za: <router-outlet></router-outlet>.

Chociaż twój szablon zawiera <router-outlet></router-outlet>, twój komponent nie zawiera directives: [ROUTER_DIRECTIVES], więc Angular nie będzie szukał żadnej z dyrektyw zdefiniowanych przez tę stałą:

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

Więc kiedy Angular analizuje szablony HTML AppComponent, jeśli nie rozpoznaje, <router-outlet></router-outlet>więc po prostu je ignoruje. Później, gdy Angular próbuje wyrenderować domyślny składnik trasy (HomePage), narzeka, ponieważ nie wie, gdzie go umieścić.

Ten błąd może się również zdarzyć, jeśli masz literówkę w selektorze elementów, np .:

<roter-outlet></roter-outlet>

W takim przypadku, nawet jeśli twoja directivestablica jest ustawiona poprawnie, Angular nigdy nie znajdzie wymaganego <router-outlet>elementu.

Powinien być directives metadatazamiast providers,

directives: [ROUTER_DIRECTIVES]

Ten błąd pojawia się losowo i tylko wtedy, gdy publikuję na serwerze głównym. Nigdy tego nie doświadczyłem pracując lokalnie. Kiedy mówię losowo, czasami działa dobrze, kiedy na przykład odświeżam, wyrzuca wspomniany powyżej błąd i po prostu pokazuje symbole na ekranie. Pracuję nad Angularem 2.

Wszelkie wskazówki / pomoc będą bardzo mile widziane.