잘못된 페이지로 라우팅되는 Angular2

Question

내 angular2 코어 모듈은 2.0.2이고 경로는 3.0.2입니다.

rootRoute에 하나의 app.routes를 선언하고 childRoute에 main.routes를 하나 선언하면 어떻게 든 기본 html ('/')이 childRoute베이스 (예 :/main)로 건너 뛰고 잘못된 구성 요소가 표시됩니다.
이미 내 index.html에 기본 href = "/"을 추가했으며 라우터 - 콘센트가 정상적으로 작동합니다.
파일 참조가 정확한지 확신합니다 (두 개의 경로 파일이 같은 이름의 "경로"를 내 보냅니다)
"/ account"페이지를 올바르게로드하면 유일한 문제는 '/'가 '/ main '과 나는 이유를 모른다.
다른 경로가 잘 작동 "/ 계정", "/ 주", "/ 주/영웅".. 등 여기

는
app.module

import {routes} from './app.routes'; 

@NgModule({ 
    imports:  [ BrowserModule, MainModule, routes, ReactiveFormsModule ], 
    declarations: [ AppComponent, AccountComponent ], 
    bootstrap: [ AppComponent ], 
    providers: [ HeroService, TaskService ] 
}) 
export class AppModule { } 

응용 프로그램 내 코드입니다 .routes

import {MAIN_ROUTES} from "./main/main.routes"; 

const APP_ROUTES: Routes = [ 
    { path:'', component: AccountComponent}, 
    { path:'account', component: AccountComponent}, 
    { path:'main', component: MainComponent, children: MAIN_ROUTES}, 
]; 
export const routes = RouterModule.forRoot(APP_ROUTES); 

main.module

import {routes} from "./main.routes"; 

@NgModule({ 
    imports:  [ CommonModule, routes, HeroModule, ReactiveFormsModule,TaskModule ], 
    declarations: [ MainComponent, ManageComponent], 
    exports:  [ MainComponent] 
}) 
export class MainModule { } 

main.routes 가난한 영어 죄송

export const MAIN_ROUTES: Routes = [ 
    { path:'hero', component: HeroComponent}, 
    { path:'task', component: TaskComponent}, 
    { path:'manage', component: ManageComponent}, 
    { path:'', component: TaskComponent} 
]; 

export const routes = RouterModule.forChild(MAIN_ROUTES); 

• 하지 영어 원어민. 제 질문이 당신을 혼란스럽게한다면 알려주세요.

========= (업데이트)
이상한 것은 내가 인덱스 (http://localhost:3000는) 올바른 구성 요소를 보여 내 main.routes.ts

export const MAIN_ROUTES: Routes = [ 
    { path:'main/hero', component: HeroComponent}, 
    { path:'main/task', component: TaskComponent}, 
    { path:'main/manage', component: ManageComponent}, 
    { path:'main', component: TaskComponent} 
]; 

을 변경할 수 있다는 것입니다.
그러나 '/ main/hero'및 '/ main/main/hero'모두 작동합니다!.
자식 경로가 부모 경로를 추가하지 않는 것 같습니다.
누구든지 문제를 재현 할 수 있습니까? 여기서 무슨 일이 일어나고있는거야?

Answer 1

코드를 변경하면 효과가 있습니다. app.module.ts

@NgModule({ 
    imports:  [ BrowserModule, MainModule, routes, ReactiveFormsModule ], 
    declarations: [ AppComponent, AccountComponent ], 
    bootstrap: [ AppComponent ], 
    providers: [ HeroService, TaskService ] 
}) 
export class AppModule { } 

app.routes.ts

const APP_ROUTES: Routes = [ 
    { path:'account', component: AccountComponent}, 
    { path:'main', component: MainComponent, children: MAIN_ROUTES}, 
    { path:'', component: AccountComponent}, 
    { path:'**', component: AccountComponent}, 
]; 

export const routes = RouterModule.forRoot(APP_ROUTES); 

main.module.ts

@NgModule({ 
    imports:  [ CommonModule, RouterModule, HeroModule, ReactiveFormsModule,TaskModule ], 
    declarations: [ MainComponent, ManageComponent, NavComponent], 
    exports:  [ MainComponent] 
}) 
export class MainModule { } 

main.routes.ts

export const MAIN_ROUTES: Routes = [ 
    { path:'hero', component: HeroComponent}, 
    { path:'hero/:id', component: HeroDetailComponent}, 
    { path:'task', component: TaskComponent}, 
    { path:'task/:id', component: TaskDetailComponent}, 
    { path:'manage', component: ManageComponent}, 
    { path:'', component: TaskComponent, pathMatch:'full'} 
]; 

주요 변경 사항은 "RouterModule"을 제거한 것입니다.forChild (MAIN_ROUTES) "대신에 main.module.ts에"RouterModule "을 가져 오기만하면됩니다.
모든 것이 잘 작동합니다.