Pytanie Angular2 Błąd routera: nie można znaleźć głównego gniazda do załadowania "HomePage"


Właśnie zacząłem używać nowej biblioteki routingu (@ angle / router v3.0.0-alpha.7), ale postępując zgodnie z oficjalnym docs prowadzi do błędu poniżej:

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

Pytanie brzmi: jak pozbyć się błędu i sprawić, aby router działał zgodnie z oczekiwaniami? Czy przegapiłem ustawienie?

(Ten sam błąd pojawia się podczas korzystania z wersji 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));

76
2018-06-21 16:59


pochodzenie


Miałem ten sam błąd z powodu braku szablonu '<router-outlet></router-outlet>' Może to być spowodowane również błędem literówki '<router-outlet></router-outlet>' - Rajiv Bhardwaj


Odpowiedzi:


Wystąpił błąd w twoim app.component.ts  Wygląda na to, że zadeklarowałeś dyrektywę w tablicy providerów.

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



To jest to! Wpatruję się w to zbyt długo, oczywiście. Dzięki też @micronyks! - David
To właśnie uratowało mój dzień! - cholewa1992
Mój błąd został rozwiązany, gdy dodałem <router-outlet></router-outlet> . Nie dostaję błędu, nawet gdy go nie mam directives: [ROUTER_DIRECTIVES] w sekcji @Component. - Rajiv Bhardwaj
ROUTER_DIRECTIVES nie ma większego znaczenia dla kątowego 2. angular.io/docs/ts/latest/guide/router.html - Dipendu Paul


Chociaż @JS_astronauts już dostarczył rozwiązanie, myślę, że wyjaśnienie błędu byłoby pouczające ...

Główny wylot jest ustawiany, gdy Angular analizuje szablon HTML i znajduje dyrektywa RouterOutlet, tj. gdy znajdzie selektor RouterOutlet: <router-outlet></router-outlet>.

Chociaż twój szablon zawiera <router-outlet></router-outlet>Twój komponent nie zawiera directives: [ROUTER_DIRECTIVES], więc Angular nie będzie szukał żadnej z dyrektyw zdefiniowanych przez tę stałą:

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

Kiedy Angular analizuje szablony HTML AppComponent, jeśli nie rozpoznaje <router-outlet></router-outlet> więc to po prostu ignoruje. Później, gdy Angular próbuje renderować domyślny komponent trasy (HomePage), narzeka, ponieważ nie wie, gdzie go umieścić.


Ten błąd może również wystąpić, jeśli masz literówkę w selektorze elementów, np .:

<roter-outlet></roter-outlet>

W tym przypadku, nawet jeśli twoja directives array jest ustawiona poprawnie, Angular nigdy nie znajdzie wymaganego <router-outlet> element.


85
2017-07-09 16:55



Tylko uwaga dla każdego, kto używa późniejszych wersji: właściwość 'dyrektyw' @Component została usunięta w RC6. stackoverflow.com/questions/39658186/... - Will
Ponownie literówka w selektorze elementów: albo jeśli w szablonie brakuje po prostu całego tagu ... - Joshua Drake
Inna uwaga: jeśli kopiujesz i wklejasz, powinno to brzmieć <router-outlet></router-outlet> . Brakuje u w znacznikach początkowych i końcowych - ntgCleaner
Wstydzimy się, że korekta z rotera na router nie wymaga minimalnych zmian postaci - aland


Powinno być directives metadata zamiast providers,

directives: [ROUTER_DIRECTIVES]

7
2018-06-21 18:02