Angular2 routage vers une mauvaise page

Question

Mon module de base angular2 est 2.0.2, les routes sont 3.0.2.

Lorsque je déclare une app.routes pour rootRoute et une main.routes pour childRoute, d'une manière ou d'une autre, la base html('/') passe à la base childRoute (comme /main) et affiche le mauvais composant.
J'ai déjà ajouté base href="stackoverflow.com/" à mon index.html et la sortie du routeur fonctionne bien.
Je suis presque sûr que la référence du fichier est correcte (deux fichiers de routes exportent le même nom "routes").
Lorsque je saisis "/account", la page se charge correctement, le seul problème est que '/' est chargé comme '/main' et je ne sais pas pourquoi.
D'autres routes fonctionnent bien, "/account", "/main", "/main/hero", etc.

Voici mon code
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);

module principal

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

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

routes principales

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

• Je ne suis pas de langue maternelle anglaise, désolé pour mon mauvais anglais. Si mes questions vous dérangent, veuillez me le faire savoir.

\=========(mise à jour)
Le truc bizarre, c'est que je change mon 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}
];

L'indice ( http://localhost:3000 ) montrent le composant correct.
Cependant, '/main/hero' et '/main/main/hero' fonctionnent tous les deux !
Il semble que la route enfant n'ajoute pas la route parent.
Quelqu'un peut-il reproduire le problème ? Que se passe-t-il ?

Answer 1

Je change le code et ça marche. 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);

module principal.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'}
];

La principale modification consiste à supprimer "RouterModule.forChild(MAIN_ROUTES)" et à importer simplement "RouterModule" dans main.module.ts.
Ensuite, tout fonctionne bien.