Angular2 라우터 오류: 'HomePage'를 로드할 기본 콘센트를 찾을 수 없습니다.
새 라우팅 라이브러리(@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.s.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)
];
홈.ts
import { Component } from '@angular/core';
@Component({
template: '<h1>Home Page</h1>'
})
export class HomePage {
}
메인.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));
@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>
원소의
오류가 있습니다.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>
`,
directives: [ROUTER_DIRECTIVES] //here
})
export class AppComponent {
}
그럴 것 같네요.directives metadata
대신에providers
,
directives: [ROUTER_DIRECTIVES]
라이브 서버에 게시할 때만 무작위로 이 오류가 발생합니다.저는 현지에서 일할 때 이런 경험을 해본 적이 없습니다.제가 무작위로 말할 때, 가끔은 잘 작동합니다. 예를 들어 새로 고치면 위에서 언급한 오류가 발생하고 화면에 기호만 표시됩니다.저는 Angular 2에서 일하고 있습니다.
어떤 지도/도움을 주시면 대단히 감사하겠습니다.
언급URL : https://stackoverflow.com/questions/37950413/angular2-router-error-cannot-find-primary-outlet-to-load-homepage
'source' 카테고리의 다른 글
Excel VBA에서 사용자 정의 워크시트 함수 생성 (0) | 2023.08.08 |
---|---|
텍스트 상자에서 "Enter" 키를 눌렀을 때 HTML 버튼을 트리거하려면 어떻게 해야 합니까? (0) | 2023.08.08 |
javascript를 사용하여 숫자만 반환하는 Regex (0) | 2023.08.08 |
WHERE 조건에 비해 JOIN 절을 사용하는 이유는 무엇입니까? (0) | 2023.08.08 |
입력 유형 날짜로 날짜 설정 (0) | 2023.08.08 |