Ошибка маршрутизатора 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.

Будем очень признательны за любое руководство / помощь.