route - Error del enrutador Angular2: no se puede encontrar la salida principal para cargar ''HomePage''

rutas en angular

Question

Acabo de comenzar a usar la nueva biblioteca de enrutamiento (@ angular / router v3.0.0-alpha.7) pero seguir los docs oficiales conduce al siguiente error:

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

La pregunta es: ¿cómo me deshago del error y hago que el enrutador se comporte como se esperaba? ¿Me he perdido una configuración?

(El mismo error aparece cuando se usa la versión 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));

Answer 1

Aunque @JS_astronauts ya proporcionó una solución, creo que sería instructivo explicar el error ...

La salida principal se establece cuando Angular analiza una plantilla HTML y encuentra la directiva RouterOutlet , es decir, cuando encuentra el selector de RouterOutlet: <router-outlet></router-outlet> .

Aunque su plantilla contiene <router-outlet></router-outlet> , su componente no contiene directives: [ROUTER_DIRECTIVES] , por lo que Angular no buscará ninguna de las directivas definidas por esa constante:

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

Entonces, cuando Angular analiza las plantillas HTML de AppComponent, si no reconoce <router-outlet></router-outlet> , simplemente lo ignora. Más tarde, cuando Angular intenta representar el componente de ruta predeterminado (HomePage), se queja porque no sabe dónde colocarlo.

Este error también puede ocurrir si tiene un error tipográfico en su selector de elementos, por ejemplo:

<roter-outlet></roter-outlet>

En este caso, incluso si su matriz de directives está configurada correctamente, Angular nunca encontrará el elemento <router-outlet> requerido.

Answer 2

Deben ser directives metadata lugar de providers ,

directives: [ROUTER_DIRECTIVES]

Answer 3

Estoy experimentando este error al azar y solo cuando publico en el servidor en vivo. Nunca he experimentado esto cuando trabajo localmente. Cuando digo al azar, a veces funciona bien, cuando actualizo, por ejemplo, arroja ese error mencionado anteriormente y solo muestra símbolos en la pantalla. Estoy trabajando en Angular 2.

Cualquier orientación / ayuda será muy apreciada.

Answer 4

Tiene un error en su app.component.ts Parece que declaró una directiva en la matriz de proveedores.

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