Soru Angular2 Router hatası: 'HomePage' yüklemek için birincil çıkış bulamıyor


Yeni yönlendirme kütüphanesini kullanmaya başladım (@ açısal / yönlendirici v3.0.0-alpha.7) ancak resmi takip ediyorum docs aşağıdaki hataya yol açar:

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

Soru - hatayı nasıl çözebilirim ve yönlendiricinin beklendiği gibi davranmasını nasıl sağlayabilirim? Bir ayarı özledim mi?

(Alpha.6 sürümü kullanılırken aynı hata görüntülenir.)

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


Menşei


Eksik şablon nedeniyle aynı hatayı yaşıyordum '<router-outlet></router-outlet>' Bu da yazım hatası nedeniyle olabilir '<router-outlet></router-outlet>' - Rajiv Bhardwaj


Cevaplar:


Senin içinde bir hata var app.component.ts  Sağlayıcı dizisinde bir yönergeyi bildirmişsiniz gibi görünüyor.

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



Bu kadar! Çok uzun zamandır ona bakıyorum. @Micronyks'e teşekkürler! - David
Bu sadece günümü kurtardı! - cholewa1992
Eklediğim hatam çözüldü <router-outlet></router-outlet> . Elimde olmadığında bile hata alamıyorum directives: [ROUTER_DIRECTIVES] @Component bölümünde. - Rajiv Bhardwaj
ROUTER_DIRECTIVES, köşeli 2 için artık alakalı değil. angular.io/docs/ts/latest/guide/router.html - Dipendu Paul


@JS_astronauts halihazırda bir çözüm sağlasa da, hatayı açıklamak için öğretici olacağını düşünüyorum ...

Angular, Angular bir HTML şablonunu ayrıştırır ve bulursa birincil çıkış ayarlanır yönerge RouterOutletyani RouterOutlet'in seçicisini bulduğunda: <router-outlet></router-outlet>.

Şablonunuz içermesine rağmen <router-outlet></router-outlet>, bileşeniniz içermiyor directives: [ROUTER_DIRECTIVES]Yani, Açısal bu sabit tarafından tanımlanan yönergelere bakmayacaktır:

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

Yani Angular, AppComponent'in HTML şablonlarını ayrıştırırsa, tanımadığı takdirde <router-outlet></router-outlet> bu yüzden sadece onu yok sayar. Daha sonra, Angular, varsayılan yol bileşenini (HomePage) oluşturmaya çalıştığında, bunu nereye koyacağını bilmediği için yakınıyor.


Bu hata, öğe seçicinizde bir yazım hatası varsa, örneğin:

<roter-outlet></roter-outlet>

Bu durumda, directives dizi doğru ayarlanmış, Açısal gerekli asla bulamaz <router-outlet> öğesi.


85
2017-07-09 16:55



Daha sonraki sürümleri kullanan herkes için bir not: @Component 'direktifleri' özelliği RC6'da kaldırılmıştır. stackoverflow.com/questions/39658186/... - Will
Öğe seçicinizde yeniden yazım hatası: Veya şablonunuz etiketin tamamını birlikte kaçırıyorsa ... - Joshua Drake
Başka bir Not: Eğer kopyalayıp yapıştırıyorsanız, söylemelisiniz <router-outlet></router-outlet> . Eksik u başlangıç ​​ve bitiş etiketlerinde - ntgCleaner
Roterden yönlendiriciye olan düzeltmenin minimum karakter değişikliği gerekliliğinden utanma - aland


Olmalı directives metadata yerine providers,

directives: [ROUTER_DIRECTIVES]

7
2018-06-21 18:02