Помилка маршрутизатора Angular2: не вдається знайти основну розетку для завантаження "HomePage"

Я щойно почав користуватися новою бібліотекою маршрутизації (@ angular / router v3.0.0-alpha.7), але дотримання офіційних документів призводить до помилки нижче:

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

Питання в тому - як мені позбутися помилки і змусити маршрутизатор поводитися належним чином? Я пропустив налаштування?

(Така сама помилка з'являється під час використання версії 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));

У вас є помилка у вашому 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>
        `,
     directives: [ROUTER_DIRECTIVES] //here
})
export class AppComponent {
}

Незважаючи на те, що @JS_astronauts вже надав рішення, я вважаю, що було б повчально пояснити помилку ...

Основна розетка встановлюється , коли кутові розбирає HTML шаблон і знаходить директиву RouterOutlet , тобто, коли він знаходить селектор RouterOutlet в: <router-outlet></router-outlet>.

Хоча ваш шаблон містить <router-outlet></router-outlet>, ваш компонент не містить directives: [ROUTER_DIRECTIVES], тому Angular не буде шукати жодної директиви, визначеної цією константою:

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

Отже, коли Angular аналізує HTML-шаблони AppComponent, якщо він не розпізнає, <router-outlet></router-outlet>то просто ігнорує його. Пізніше, коли Angular намагається відобразити компонент маршруту за замовчуванням (HomePage), він скаржиться, бо не знає, куди його помістити.

Ця помилка також може статися, якщо у вашому селекторі елемента є помилка, наприклад:

<roter-outlet></roter-outlet>

У цьому випадку, навіть якщо ваш directivesмасив встановлений правильно, Angular ніколи не знайде необхідний <router-outlet>елемент.

Це має бути directives metadataзамість providers,

directives: [ROUTER_DIRECTIVES]

Я відчуваю цю помилку випадково і лише тоді, коли публікую на поточному сервері. Я ніколи не відчував цього, працюючи на місцях. Коли я кажу випадково, іноді це працює нормально, коли, наприклад, я оновлюю, він видає ту помилку, згадану вище, і просто відображає символи на екрані. Я працюю над Angular 2.

Будь-яке керівництво / допомога будуть дуже вдячні.