라우터가 상위 구성 요소의 템플릿을 생성하지 않습니까?

Question

베타/RC1 스타일 (@ angular/router-deprecated)에서 RC4 (@ angular/router)에서 사용할 수있는 라우팅 시스템으로 마이그레이션하려고합니다.

부모 라우터 구성 요소와 하위 항목의 개념을 계속 숙지하고있는 것을 제외하고는 간단합니다. 내 라우터의 상위 경로에 정의 된 실제 구성 요소는 내 경로 중 일부에 대해 템플릿을 표시하지 않는 것 같습니다. 해당 부모는 새로운 내용을 포함하는 내용의 래퍼입니다. <router-outlet>

내 대시 보드 라우팅이 올바르게 작동합니다. 처음에는 멤버십 하위를로드하고 DashboardComponent에 포함 된 래퍼 내용이 표시되어 각 하위 항목을 탐색 할 수 있습니다.

export const DashboardRoutes: RouterConfig = [ 
    { 
     path: "dashboard", 
     component: DashboardComponent, 
     children: [ 
      { path: "", redirectTo: "membership" }, 
      { path: "executive", component: ExecutivePanelComponent }, 
      { path: "membership", component: MembershipPanelComponent } 
     ] 
    } 
]; 

내 사이트의 다른 탐색 가능한 영역에서는 동일하게 작동하지 않습니다. 브라우저의 URL이 올바르게 표시되지만 빈 화면이 렌더링됩니다. ReportCatalogComponent의 콘텐츠는 표시되지 않습니다.

export const ReportCatalogRoutes: RouterConfig = [ 
    { 
     path: "catalog", 
     component: ReportCatalogComponent, 
     children: [ 
      { path: "", component: EmptyComponent }, 
      //{ path: "report/:id", component: ReportDetailsComponent, data: { create: false } }, 
      { path: "report", component: ReportDetailsComponent, data: { create: true } } 
     ] 
    } 
]; 

정확히 내가 여기서 잘못 할 수 있습니까?

Answer 1

그래서 더 많은 문제를 단순화하기위한 시도와 시도를 한 후에 나는이 문제의 원인을 발견했습니다.

부모 경로에 지시문이 포함되어 있으며 다음과 같이 참조되었습니다.

import { ReportTileComponent } from "./index"; 

해결 방법은 다른 모든 잠재적 문제를 제거한 후 최소한 구성 요소를 참조하는 것입니다.

import { ReportTileComponent } from "./main/report-tile.component"; 

이 문제에 대한 추론은 대단히 당황 스럽지만 내 문제를 해결했습니다.