默认路由重定向不适用于Angular 2中的延迟加载路由

我的猜测是AccountModule被导入到根模块中。

这是应该起作用的通用设置。抱歉，我没有使用您的所有代码，因为我认为使用最少但完整的示例会更清楚。我对可能导致您观察到的行为的潜在问题发表了评论。我不能完全确定这会在没有更多信息的情况下解决您的确切问题，但这至少是相似的，应该会对某人有所帮助。

进行以下使用模块延迟加载的设置：

注意-延迟加载可能会由于路由器模块导入子路由而导致意外行为，尤其是如果您将服务捆绑到功能模块中而需要进行根级导入（虽然最好将服务分离到各自的模块中）。以下评论应解释我的意思。

课程是只导入带有路由的惰性模块一次。（如果不这样做，则模块将不再是惰性的，并且完全无法实现延迟加载的目的）。如果您将捆绑的服务捆绑在根目录中，则需要将这些服务分为不同的根服务模块

app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component.ts';
import { routes } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    // I think this might be your issue.
    // DON'T do this (import child module here)
    //
    // MaleChildModule
    // or somethings like this
    // FemaleChildModule.forRoot()
    //
    // NOTE - order doesn't matter either. i.e. putting this on the
    // line above RouterModule.forRoot(routes) will not help
    // 
    // Doing so means the ChildModules and routes are actually being
    // imported twice
    //
    // so these would all be valid paths
    // /female/sally
    // /sally
    // /male/john
    // /john
    //
    // then if you had a module's routes set up like those in 
    // the MaleChildModule the root redirect to /child
    // would not work and it would just be a blank view with no path
    // update in the browser. very confusing situation.
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'ex-app',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {}

app-routing.module.ts

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'males'
  },
  {
    path: 'males',
    loadChildren: './male-child.module#MaleChildModule'
  },
  {
    path: 'females',
    loadChildren: './female-child.module#FemaleChildModule'
  }
]

注意-延迟加载的模块会导入RouterModule.forChild（routes），如果不小心可能会导致意外行为

male-child.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { JohnChildComponent } from './john-child.component.ts';

// NOTE - if you set up your child module like this and make the
// mistake I'm describing (importing child modules multiple times)
// you will get unexpected behavior of redirects not working and
// no clues as to why. I suggest always having empty paths redirect
// to something with a component. FemaleChildModule is an example.
const childRoutes: Routes = [
  {
    path: 'john',
    component: JohnChildComponent
  }
]

@NgModule({
  imports: [
    RouterModule.forChild(childRoutes)
  ],
  declarations: [
    JohnChildComponent
  ]
})
export class MaleChildModule {}

女性儿童模块

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { SallyChildComponent } from './sally-child.component.ts';

const childRoutes: Routes = [
  {
    path: '',
    children: [
      // NOTE - I like to setup lazy loaded modules like this because
      // it prevents masking of the module loading issue because there
      // are never any paths that don't have an associated component
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'sally',
      },
      {
        path: 'sally',
        component: SallyChildComponent
      }
   ]
  }
]

@NgModule({
  imports: [
    RouterModule.forChild(childRoutes)
  ],
  declarations: [
    SallyChildComponent
  ]
})
export class FemailChildModule {}

john-child.component.ts

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'ex-john',
  template: '<p>john</p>'
})
export class JohnChildComponent {}

sally-child.component.ts

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'ex-sally',
  template: '<p>sally</p>'
})
export class SallyChildComponent {}