Angular2 Router-Fehler: Primärsteckdose zum Laden von 'HomePage' kann nicht gefunden werden

Ich habe gerade angefangen, die neue Routing-Bibliothek (@ angle / router v3.0.0-alpha.7) zu verwenden, aber das Befolgen der offiziellen Dokumente führt zu folgenden Fehlern:

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

Die Frage ist: Wie kann ich den Fehler beseitigen und den Router wie erwartet verhalten lassen? Habe ich eine Einstellung verpasst?

(Der gleiche Fehler tritt bei Verwendung der Alpha.6-Version auf.)

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

Sie haben einen Fehler in Ihrem app.component.ts Aussehen. Sie haben anscheinend eine Direktive im Anbieter-Array deklariert.

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

Obwohl @JS_astronauts bereits eine Lösung bereitgestellt hat, halte ich es für lehrreich, den Fehler zu erklären ...

Der primäre Ausgang wird festgelegt, wenn Angular eine HTML-Vorlage analysiert und die Direktive RouterOutlet findet , dh wenn der Selektor RouterOutlet gefunden wird : <router-outlet></router-outlet>.

Obwohl Ihre Vorlage enthält, enthält <router-outlet></router-outlet>Ihre Komponente keine directives: [ROUTER_DIRECTIVES], sodass Angular keine der durch diese Konstante definierten Anweisungen sucht:

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

Wenn Angular die HTML-Vorlagen von AppComponent analysiert und diese nicht erkennt <router-outlet></router-outlet>, werden sie einfach ignoriert. Wenn Angular später versucht, die Standardroutenkomponente (HomePage) zu rendern, beschwert es sich, weil es nicht weiß, wo es abgelegt werden soll.

Dieser Fehler kann auch auftreten, wenn Sie einen Tippfehler in Ihrer Elementauswahl haben, z.

<roter-outlet></roter-outlet>

In diesem Fall findet directivesAngular selbst dann nicht das erforderliche <router-outlet>Element , wenn Ihr Array richtig eingestellt ist .

Es sollte directives metadatastatt sein providers,

directives: [ROUTER_DIRECTIVES]

Ich habe diesen Fehler zufällig und nur, wenn ich ihn auf dem Live-Server veröffentliche. Ich habe das noch nie erlebt, als ich vor Ort gearbeitet habe. Wenn ich zufällig sage, funktioniert es manchmal gut, wenn ich zum Beispiel aktualisiere, wird der oben erwähnte Fehler ausgelöst und nur Symbole auf dem Bildschirm angezeigt. Ich arbeite an Angular 2.

Jede Anleitung / Hilfe wird sehr geschätzt.