it-swarm.com.de

Angular2 Router-Fehler: Primäre Steckdose zum Laden von 'HomePage' nicht gefunden

Ich habe gerade angefangen, die neue Routing-Bibliothek (@ angle/router v3.0.0-alpha.7) zu verwenden, aber das Befolgen des offiziellen docs führt zu folgendem Fehler:

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 beheben und den Router so einstellen, dass er sich wie erwartet verhält? Habe ich eine Einstellung verpasst?

(Bei Verwendung der alpha.6-Version tritt derselbe Fehler 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));
77
David

Sie haben einen Fehler in Ihrem app.component.ts Sieht so aus, als hätten Sie eine Direktive im Provider-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 {
}
71
KB_

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

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

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

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

Wenn also Angular die HTML-Vorlagen von AppComponent analysiert, wenn es <router-outlet></router-outlet> Nicht erkennt, ignoriert es es einfach. Später, wenn Angular versucht, Wenn Sie die Standardroutenkomponente (HomePage) rendern, beschwert sie sich, weil sie nicht weiß, wo sie platziert werden soll.


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

<roter-outlet></roter-outlet>

In diesem Fall wird Angular) niemals das erforderliche <router-outlet> - Element finden, auch wenn Ihr directives -Array richtig eingestellt ist.

85
Mark Rajcok

Es sollte sein directives metadata anstelle von providers,

directives: [ROUTER_DIRECTIVES]
7
micronyks

Ich erlebe diesen Fehler zufällig und nur, wenn ich 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, wenn ich zum Beispiel aktualisiere, löst es den oben erwähnten Fehler aus und zeigt nur Symbole auf dem Bildschirm an. Ich arbeite an Angular 2.

Jede Anleitung/Hilfe wird sehr geschätzt.

1
Simon Azzopardi