Angular2路由到错误的页面

Question

我的angular2核心模块是2.0.2，routes是3.0.2。

当我为 rootRoute 声明一个 app.routes 并为 childRoute 声明一个 main.routes 时，base html('/') 会以某种方式跳转到 childRoute base(例如/main)并显示错误的组件。
我已经将 base href="/" 添加到我的 index.html 并且路由器 socket 工作正常。
我很确定文件引用是正确的(两个路由文件导出同名“路由”)
当我输入“/account”时页面加载正确，唯一的问题是“/”会被加载为“/main”，我不知道为什么。
其他路线运作良好，“/account”，“/main”，“/main/hero”..等

这是我的代码
app.module

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

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

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

ma​​in.module

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

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

ma​​in.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);

• 母语不是英语，抱歉英语不好。如果我的问题让您感到困惑，请告诉我。

=========(更新)
奇怪的是我改变了我的 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}
];

索引 ( http://localhost:3000 ) 显示正确的组件。
但是，'/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);

ma​​in.module.ts

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

ma​​in.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”。
然后一切正常。