web-dev-qa-db-fra.com

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

Je viens juste de commencer à utiliser la nouvelle bibliothèque de routage (@ angular/router v3.0.0-alpha.7), mais le fait de suivre le document officiel docs entraîne une erreur ci-dessous:

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

La question est la suivante: comment puis-je supprimer l'erreur et faire en sorte que le routeur se comporte comme prévu? Ai-je raté un réglage?

(La même erreur apparaît lors de l'utilisation de la version alpha.6.)

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));
angularrouter
77
David

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

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

La sortie principale est définie lorsque Angular analyse un modèle HTML et trouve directive RouterOutlet , c'est-à-dire lorsqu'il trouve le sélecteur de RouterOutlet: <router-outlet></router-outlet>.

Bien que votre modèle contienne <router-outlet></router-outlet>, votre composant ne contient pas directives: [ROUTER_DIRECTIVES], de sorte que Angular ne recherchera aucune des directives définies par cette constante:

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

Ainsi, lorsque Angular analyse les modèles HTML d'AppComponent, s'il ne reconnaît pas <router-outlet></router-outlet>, il l'ignore simplement. Plus tard, lorsque Angular essaie de restituer le composant de route par défaut (HomePage), il se plaint car il ne sait pas où le placer.

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

<roter-outlet></roter-outlet>

Dans ce cas, même si votre tableau directives est défini correctement, Angular ne trouvera jamais l'élément <router-outlet> requis.

85
Mark Rajcok

Ce devrait être directives metadata au lieu de providers,

directives: [ROUTER_DIRECTIVES]
7
micronyks

Je rencontre cette erreur au hasard et uniquement lorsque je publie sur le serveur en direct. Je n'ai jamais vécu cela quand je travaillais localement. Lorsque je dis au hasard, parfois cela fonctionne bien, lorsque j'actualise, par exemple, il renvoie l'erreur mentionnée ci-dessus et affiche simplement des symboles à l'écran. Je travaille sur Angular 2.

Toute orientation/aide sera très appréciée.

1
Simon Azzopardi