Angular2路由到错误页面

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

当我为rootRoute声明一个app.routes，为childRoute声明一个main.routes时，基本html（“/”）会以某种方式跳转到childRoute base（例如/main）并显示错误的组件。
我已经在我的index.html中添加了base href=“/”，路由器插座工作正常。
我非常确定文件引用是正确的（两个路由文件导出相同名称的“路由”）
当我正确输入“/account”页面加载时，唯一的问题是“/”将作为“/main”加载，我不知道为什么。
其他路线也很好，“/account”、“/main”、“/main/hero”。。等

这是我的代码
应用程序模块

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

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

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

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

应用程序路径

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

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

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

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

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

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

主模块

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

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

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

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

主要路线

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

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

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

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

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

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

• 不是以英语为母语的人，抱歉英语不好。如果我的问题让你困惑，请告诉我

==========（更新）
奇怪的是我改变了我的主要路线

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”都可以
子路由似乎没有附加父路由。

---

有人能重现这个问题吗？这是怎么回事

我更改了代码，它就工作了。 应用程序模块.ts

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

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

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

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

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

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

应用程序路由.ts

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

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

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

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

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

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

main.module.ts

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

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

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

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

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

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

main.routes.ts

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

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

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

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

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

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）”，而只是将“RouterModule”导入main.module.ts.

---

然后一切都很好。

你能发布一个html模板的示例，你用它来触发这个重定向吗？我直接在浏览器中键入URL，而不是触发它如果空路径路由没有子路径添加

pathMatch

像

{path:''，component:AccountComponent，pathMatch:'full'}，

另外，添加了

forChild（）

的路由不会自动成为子路由。这里已经有几个相关的问题。我将

{path:''，组件：AccountComponent，pathMatch:'full'}，

添加到我的“app.routes”中，并从我的main.routes中删除

main/

。这仍然是错误的。“有几个相关的问题”是什么意思？