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

79

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));
angular router David
quelle
1
Ich hatte den gleichen Fehler aufgrund fehlender Vorlage von '<router-outlet></router-outlet>'Dies kann auch auf Tippfehler in'<router-outlet></router-outlet>'
Rajiv Bhardwaj

Antworten:

72

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 {
}
KB_
quelle
3
Mein Fehler wurde behoben, als ich hinzufügte <router-outlet></router-outlet>. Es wird kein Fehler directives: [ROUTER_DIRECTIVES]angezeigt , auch wenn ich ihn nicht im Abschnitt @Component habe.
Rajiv Bhardwaj
1
ROUTER_DIRECTIVES ist nicht mehr relevant für Angular
Dipendu Paul
86

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 .

Mark Rajcok
quelle
Nur ein Hinweis für alle, die spätere Versionen verwenden: Die Eigenschaft 'directives' von @Component wurde in RC6 entfernt. stackoverflow.com/questions/39658186/…
Will
Tippfehler in Ihrer Elementauswahl: Oder wenn in Ihrer Vorlage einfach das Tag insgesamt fehlt ...
Joshua Drake
1
Noch ein Hinweis: Wenn Sie kopieren und einfügen, sollte es heißen <router-outlet></router-outlet>. Es fehlen die uAnfangs- und End-Tags
ntgCleaner
Schade , dass die Korrektur von roter zu Router keine Mindestzeichen Änderung Anforderungen
Aland
7

Es sollte directives metadatastatt sein providers,

directives: [ROUTER_DIRECTIVES]
Mikronyken
quelle
1

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.

Simon Azzopardi
quelle