Erreur de routeur Angular2: impossible de trouver la sortie principale pour charger 'HomePage'

Question

Je viens de commencer à utiliser les nouvelles de la bibliothèque de routage (@angulaire/routeur v3.0.0-alpha.7), mais la suite de l'officiel docs conduit à l'erreur ci-dessous:

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

La Question est - comment puis-je me débarrasser de l'erreur et de faire le routeur se comporter comme prévu? Ai-je oublié un paramètre?

(Même message d'erreur s'affiche lors de l'utilisation de l'alpha.6 version.)

app.composante.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.les itinéraires.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)
];

la maison.ts

import { Component } from '@angular/core';

@Component({
    template: '<h1>Home Page</h1>'
})
export class HomePage {
}

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

Answer 1

Bien que @JS_astronauts déjà fourni une solution, je pense qu'il serait intéressant d'expliquer l'erreur...

Le courant principal est défini lors de l'Angulaire de l'analyse d'un modèle HTML et trouve directive RouterOutlet, c'est à dire, quand il trouve RouterOutlet du sélecteur: <router-outlet></router-outlet>.

Bien que votre modèle ne contiennent <router-outlet></router-outlet>, votre composant ne contient pas d' directives: [ROUTER_DIRECTIVES], de sorte Angulaire de ne pas chercher de l'une des directives définies par la constante:

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

Alors, quand Angulaire analyse AppComponent HTML de modèles, si ce n'est pas reconnaître <router-outlet></router-outlet> donc il l'ignore. Plus tard, quand Angulaire essaye de rendre la route par défaut du composant (page d'Accueil), il se plaint parce que ne sais pas où le mettre.

---

Cette erreur peut également se produire si vous avez une erreur de frappe dans votre sélecteur d'élément, par exemple:

<roter-outlet></roter-outlet>

Dans ce cas, même si votre directives tableau est correctement réglé, Angulaire ne trouverez jamais le nécessaire <router-outlet> élément.

Answer 2

Vous avez une erreur dans votre app.component.ts On dirait que vous avez déclaré une directive dans le tableau providers.

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

Answer 3

Ce devrait être directives metadata au lieu de providers ,

 directives: [ROUTER_DIRECTIVES]