Angular2 라우터 오류 : '홈페이지'를로드 할 기본 콘센트를 찾을 수 없습니다.


79

방금 새 라우팅 라이브러리 (@ angular / router v3.0.0-alpha.7)를 사용하기 시작했지만 공식 문서를 따르면 아래 오류가 발생합니다.

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

질문은-어떻게 오류를 제거하고 라우터가 예상대로 작동하도록합니까? 설정을 놓친 적이 있습니까?

(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));

1
나는의 템플릿 누락으로 인해 동일한 오류를 가졌다 '<router-outlet></router-outlet>'이 것은 너무에 오타 오류 때문일 수 있습니다'<router-outlet></router-outlet>'
라지브 Bhardwaj의

답변:


72

app.component.ts Provider 배열에서 지시문을 선언 한 것처럼 Looks에 오류가 있습니다 .

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

3
내가 추가 한 내 오류가 해결되었습니다 <router-outlet></router-outlet>. directives: [ROUTER_DIRECTIVES]@Component 섹션에 없는 경우에도 오류가 발생하지 않습니다 .
Rajiv Bhardwaj

1
ROUTER_DIRECTIVES는 더 이상 각도 2와 관련이 없습니다. angular.io/docs/ts/latest/guide/router.html
Dipendu Paul

86

@JS_astronauts가 이미 해결책을 제공했지만 오류를 설명하는 것이 유익하다고 생각합니다.

기본 콘센트는 Angular가 HTML 템플릿을 구문 분석하고 RouterOutlet 지시문을 찾을 때 설정됩니다 . 즉, RouterOutlet의 선택기 :를 찾을 때 <router-outlet></router-outlet>입니다.

템플릿에는 포함되어 있지만 <router-outlet></router-outlet>구성 요소에는이 포함되어 있지 않으므로 directives: [ROUTER_DIRECTIVES]Angular는 해당 상수로 정의 된 지시문을 찾지 않습니다.

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

따라서 Angular가 AppComponent의 HTML 템플릿을 구문 분석 할 때 인식하지 못하면 <router-outlet></router-outlet>무시합니다. 나중에 Angular가 기본 경로 구성 요소 (HomePage)를 렌더링하려고하면 어디에 놓을 지 모르기 때문에 불평합니다.


이 오류는 요소 선택기에 오타가있는 경우에도 발생할 수 있습니다. 예 :

<roter-outlet></roter-outlet>

이 경우 directives배열이 올바르게 설정되어 있어도 Angular는 필요한 <router-outlet>요소를 찾지 못합니다 .


이후 버전을 사용하는 모든 사용자를위한 참고 사항 : @Component의 '지시문'속성이 RC6에서 제거되었습니다. stackoverflow.com/questions/39658186/…
윌 :

요소 선택기에서 오타를 다시 입력하십시오. 또는 템플릿에 단순히 태그가 모두 누락 된 경우 ...
Joshua Drake

1
또 다른 참고 사항 : 복사하여 붙여 넣는 경우라고 표시되어야합니다 <router-outlet></router-outlet>. u시작 및 끝 태그 가 없습니다.
ntgCleaner

로터에서 라우터로의 수정이 최소 문자 변경 요구 사항이
아니라는 점이 수치 스러움


1

이 오류가 무작위로 발생하며 라이브 서버에 게시 할 때만 발생합니다. 나는 현지에서 일할 때 이것을 경험 한 적이 없습니다. 내가 무작위로 말하면 때로는 잘 작동합니다. 예를 들어 새로 고침하면 위에서 언급 한 오류가 발생하고 화면에 기호가 표시됩니다. Angular 2에서 작업 중입니다.

모든 안내 / 도움을 주시면 감사하겠습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.