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

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

---

app.component.tsProvider 배열에서 지시문을 선언 한 것처럼 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 {
}

---

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

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

Although your template does contain <router-outlet></router-outlet>, your component does not contain directives: [ROUTER_DIRECTIVES], so Angular won't look for any of the directives defined by that constant:

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

So when Angular parses AppComponent's HTML templates, if it doesn't recognize <router-outlet></router-outlet> so it just ignores it. Later, when Angular tries to render the default route component (HomePage), it complains because doesn't know where to put it.

---

This error can also happen if you have a typo in your element selector, e.g.:

<roter-outlet></roter-outlet>

In this case, even if your directives array is set correctly, Angular will never find the required <router-outlet> element.

---

It should be directives metadata instead of providers,

directives: [ROUTER_DIRECTIVES]

---

I am experiencing this error randomly and only when I publish on the live server. I have never experienced this when working locally. When I say randomly, sometimes it works fine, when I refresh for example, it throws that error mentioned above and just showing symbols on the screen. I am working on Angular 2.

Any guidance / help will be much appreciated.

참고URL : https://stackoverflow.com/questions/37950413/angular2-router-error-cannot-find-primary-outlet-to-load-homepage