'LocalizationListComponent'를로드 할 기본 콘센트를 찾을 수 없습니다.

Question

저는 Angular 2 RC5 애플리케이션을 만들고 있으며 모든 모듈은 느리게로드됩니다. 응용 프로그램이 시작될 때 LocalizationListComponent의 목록을 표시하지만 콘솔에 Cannot find primary outlet to load 'LocalizationListComponent'이라는 메시지가 있습니다. 목록이 표시되고 오류가 바로 구성 요소에 대해 불평한다는 점을 고려하면 매우 이상하고 이상합니다.

이 문제를 해결하려면이 오류의 영향을받는 모든 구성 요소와보기에 ROUTER_DIRECTIVES과 함께 <router-outlet>을 추가해야합니다. 이 문제는 목록이 두 번 표시되고 세부 정보 화면이이 목록 아래에로드된다는 것입니다. 이것은 내가 원하는 행동이 아닙니다.

이 후 angle.io에 Angular 2 Routing 튜토리얼을 살펴보고 plunker 코드를 확인했습니다. 모든 것이 동일하게 보이지만 오류는 계속 발생합니다.

나는 보관함에 응용 프로그램을 업로드 한 다음 (inactive link)

모듈, 경로 및 구성 요소 (나는 긴 목록을 드려 죄송합니다)입니다 :

app.routes.ts는

import { Routes, RouterModule } from "@angular/router"; 

const routes: Routes = [ 
    { 
     path: "", 
     redirectTo: "/localizations", 
     pathMatch: "full" 
    }, 
    { 
     path: "localizations", 
     loadChildren: "./app/modules/localization/localization.module", 
    } 
]; 

export const appRoutes = RouterModule.forRoot(routes); 

는

을 app.module.ts

import { NgModule } from "@angular/core"; 
import { BrowserModule } from "@angular/platform-browser"; 
import { appRoutes } from "../routes/app.routes" 

import { AppComponent } from "../components/app.component"; 
import { AppNavigationComponent } from "../components/app-navigation.component"; 
import { AppStartComponent } from "../components/app-start.component"; 

import { LoggerModule } from "./logging/logger.module"; 
import { SharedModule } from "./shared/shared.module"; 

@NgModule({ 
    imports: [ BrowserModule, LoggerModule.forRoot(), SharedModule, appRoutes ], 
    declarations: [ AppComponent, AppNavigationComponent, AppStartComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { 

} 

가 app.component.ts

/// <reference path="../../typings/globals/node/index.d.ts" /> 

import { Component, OnInit, OnDestroy } from "@angular/core"; 
import { ActivatedRoute, Router, ROUTER_DIRECTIVES } from "@angular/router"; 
import { AppNavigationComponent } from "./app-navigation.component"; 

import { LoggerMessageType } from "../modules/logging/models/enums/LoggerMessageType"; 
import { AbstractLogger } from "../modules/logging/interfaces/AbstractLogger"; 

@Component({ 
    moduleId: module.id, 
    selector: "vms-localization-app", 
    templateUrl: "../views/app.component.html", 
    directives: [ ROUTER_DIRECTIVES ] 
}) 
export class AppComponent { 
    status: string; 

    constructor(private logger: AbstractLogger) { 
     this.status = "Alpha 0.1"; 
    } 

    ngOnInit() : any { 

    } 

    ngOnDestroy() : any { 

    } 
} 

localization.module.ts

import { NgModule } from "@angular/core"; 
import { RouterModule } from "@angular/router"; 
import { CommonModule } from "@angular/common"; 
import { FormsModule } from "@angular/forms"; 
import { localizationRoutes } from "./routes/localization.routes"; 

import { LocalizationListComponent } from "./components/localization-list.component"; 
import { LocalizationDetailsComponent } from "./components/localization-details.component"; 

import { AbstractLocalizationService } from "./interfaces/AbstractLocalizationService"; 
import { MockLocalizationService } from "./services/mock-localization.service"; 

@NgModule({ 
    imports: [ localizationRoutes, CommonModule, FormsModule, RouterModule ], 
    declarations: [ LocalizationListComponent, LocalizationDetailsComponent ], 
    providers: [ { provide: AbstractLocalizationService, useClass: MockLocalizationService } ] 
}) 
export default class LocalizationModule { 

} 

localization.routes.ts

import { Routes, RouterModule } from "@angular/router"; 
import { LocalizationListComponent } from "../components/localization-list.component"; 
import { LocalizationDetailsComponent } from "../components/localization-details.component"; 

const routes: Routes = [ 
    { 
     path: "", 
     component: LocalizationListComponent, 
     children: [ 
      { 
       path: "localization", 
       component: LocalizationListComponent 
      }, 
      { 
       path: ":id", 
       component: LocalizationDetailsComponent 
      }, 
      { 
       path: "", 
       component: LocalizationListComponent 
      } 
     ] 
    } 
]; 

export const localizationRoutes = RouterModule.forChild(routes); 

,

현지화 list.component.ts

import { Component, OnInit } from "@angular/core"; 
import { Localization } from '../models/localization'; 
import { Language } from "../models/language"; 

import { AbstractLocalizationService } from "../interfaces/AbstractLocalizationService"; 
import { AbstractLogger } from "../../logging/interfaces/AbstractLogger"; 
import { LoggerMessageType } from "../../logging/models/enums/LoggerMessageType"; 

@Component({ 
    moduleId: module.id, 
    selector: "localization-list", 
    templateUrl: "../views/localization-list.component.html" 
}) 
export class LocalizationListComponent implements OnInit { 
    localizations: Localization[]; 
    languages: Language[]; 

    constructor(private localizationService: AbstractLocalizationService, 
      private logger: AbstractLogger) { 

    } 

    ngOnInit() : any { 
     this.localizationService.getLocalizations() 
      .subscribe((result: Localization[]) => { 
       this.localizations = result; 
       this.languages = this.localizations[0].languages; 
      }); 
    } 
} 

app.component.html

<div class="container"> 
    <div class="page-header"> 
     <h1>VMS Localization<small>{{ status }}</small></h1> 
     <app-navigation></app-navigation> 
    </div> 

    <router-outlet></router-outlet> 
</div> 

이

위의 조각에 뭔가 문제 (및 공급 프로젝트)이 있어야합니다,하지만 난 어떤 것도 볼 수 없습니다.

는 또한 StackOverflow에 다른 질문을 확인하지만 그들은 대부분 내가 app.component.ts에 도움 사람들을위한

감사를 ROUTER_DIRECTIVES 누락 처리!

Answer 1

방금 ​​GitHub (https://github.com/angular/angular/issues/10686)에 문제가있어서, 의도적 인 동작이라고 설명했습니다. children을 가진 모든 부모 (그리고 loadChildren의 경우 동일하게 보입니다)는 자식을로드하는 콘센트가 있어야합니다.

Router documentation에는 아무 것도 기록되어 있지 않은 것으로 보입니다.

업데이트 : 모듈 라우터에서 children을 선언하면이 하위 노드를로드하기 위해 각 부모가 자신의 <router-outlet></router-outlet>을 가지고 있어야합니다. 이를 구현하는 방법은 필요에 따라 다릅니다. 내 솔루션을 위해 난 그냥 <router-outlet></router-outlet> 포함 된 빈 구성 요소를 생성하고 다음과 같은 경로 정의 :

import { Routes, RouterModule } from "@angular/router" 
import { SomeParentComponent } from "./app/modules/SomeModule/SomeParentComponent" 
import { SomeChildComponent1 } from "./app/modules/SomeModule/SomeChild1Component" 
import { SomeChildComponent2 } from "./app/modules/SomeModule/SomeChild2Component" 

const routes: Routes = [ 
    path: "", 
    component: SomeParentComponent, 
    children: [ 
     { 
      path: "", 
      component: SomeChild1Component 
     }, 
     { 
      path: ":id", 
      component: SomeChild2Component 
     } 
    ] 
] 

export const someModuleRoutes = RouterModule.forChild(routes); 

이

가 SomeParentComponent 가리키는 loadChildren를 호출 주요 구성 요소 경로로 트릭을 할해야합니다.