間違ったページへのAngular2ルーティング

Question

私のangular2コアモジュールは2.0.2、ルートは3.0.2です。

rootRouteにapp.routesを、childRouteにmain.routesを1つ宣言すると、基本的なhtml（ '/'）はchildRouteベース（/ mainなど）にジャンプして間違ったコンポーネントを表示します。
私はすでにindex.htmlにベースhref = "/"を追加しており、ルータのコンセントは正常に動作しています。
私はかなりファイル参照が正しいことを確信しています（2つのルートファイルは同じ名前の "ルート"をエクスポートします）
"/ account"を正しく入力すると、 '/メイン 'と私は理由を知らない。
他の経路は、ここに私のコード
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」を削除することです。私は単純にmain.module.tsに "RouterModule"をインポートします。
すべてのものがうまくいきます。