Frage Angular2-Router-Fehler: Primäre Steckdose zum Laden von "HomePage" kann nicht gefunden werden


Ich habe gerade angefangen, die neue Routing-Bibliothek (@ angular / router v3.0.0-alpha.7) zu benutzen, aber dem Beamten zu folgen Dokumente führt zu folgendem Fehler:

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

Frage ist - wie kann ich den Fehler loswerden und den Router wie erwartet verhalten? Habe ich eine Einstellung verpasst?

(Derselbe Fehler tritt auf, wenn die Alpha.6-Version verwendet wird.)

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

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

76
2018-06-21 16:59


Ursprung


Antworten:


Sie haben einen Fehler in Ihrem app.component.ts  Es sieht so aus, als hätten Sie im Array Provider eine Direktive 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
2018-06-21 17:59



Obwohl @JS_astronauts bereits eine Lösung bereitgestellt hat, wäre es meiner Meinung nach lehrreich, den Fehler zu erklären ...

Der primäre Ausgang wird gesetzt, wenn Angular eine HTML-Vorlage analysiert und findet Anweisung RouterOutletd. h., wenn RouterOutlet Selektor gefunden wird: <router-outlet></router-outlet>.

Obwohl Ihre Vorlage enthält <router-outlet></router-outlet>, Ihre Komponente enthält nicht directives: [ROUTER_DIRECTIVES], so wird Angular nach keiner der Direktiven suchen, die durch diese Konstante definiert sind:

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

Also wenn Angular die HTML-Vorlagen von AppComponent analysiert, wenn es nicht erkennt <router-outlet></router-outlet> also ignoriert es es einfach. Später, wenn Angular versucht, die Standard-Route-Komponente (HomePage) zu rendern, klagt es, weil es nicht weiß, wo es hingelegt werden soll.


Dieser Fehler kann auch auftreten, wenn Sie einen Tippfehler in der Elementauswahl haben, z. B .:

<roter-outlet></roter-outlet>

In diesem Fall, selbst wenn Sie directives Array ist richtig eingestellt, Angular wird nie die erforderliche finden <router-outlet> Element.


85
2017-07-09 16:55



Es sollte sein directives metadata Anstatt von providers,

directives: [ROUTER_DIRECTIVES]

7
2018-06-21 18:02