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

我有一个应用程序，分为经过身份验证的部分（InternalRootComponent）和匿名部分（ExternalRootComponent）。

当我显式导航到路线时，一切正常，但当我转到根目录 (/) 时，我不会被重定向。此外，由于某种原因加载了帐户组件。

应用程序路由.module.ts：

export const routes: Routes = [
    {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
    },
    {
        path: 'login',
        component: ExternalRootComponent,
        children: [
            {
                path: '',
                loadChildren: './login/login.module#LoginModule'
            }
        ]
    },
    {
        path: 'membership',
        component: ExternalRootComponent,
        children: [
            {
                path: '',
                loadChildren: './membership/membership.module#MembershipModule'
            }
        ]
    },
    {
        path: 'app',
        component: InternalRootComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: '',
                canActivateChild: [AuthGuard],
                children: [
                    {
                        path: '',
                        redirectTo: './dashboard',
                        pathMatch: 'full'
                    },
                    {
                        path: 'dashboard',
                        loadChildren: './dashboard/dashboard.module#DashboardModule'
                    },
                    {
                        path: 'accounts',
                        loadChildren: './accounts/accounts.module#AccountsModule'
                    },
                    {
                        path: 'users',
                        loadChildren: './users/users.module#UsersModule'
                    },
                    {
                        path: 'services',
                        loadChildren: './services/services.module#ServicesModule'
                    },
                    {
                        path: 'support',
                        loadChildren: './support/support.module#SupportModule'
                    }
                ]
            }
        ]
    },
    {
        path: '**',
        component: NotFoundComponent
    }
];

账户路由.module.ts：

const routes: Routes = [
    {
        path: '',
        component: AccountInfoComponent
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AccountsRoutingModule {}

我不明白的是为什么第一个重定向不起作用 - 我希望 / 重定向到 /login。相反，似乎正在调用accounts-routing.module.ts 中的空路由。

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

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

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

注意 - 延迟加载可能会导致意外行为，因为 路由器模块导入子路由，特别是如果您将服务捆绑到功能模块中，这需要根级别导入（不过最好将服务分离到它们自己的模块中）。下面的评论应该解释我的意思。

我们的教训是只导入带有路由的惰性模块一次。 （不这样做意味着该模块不能再延迟加载，并且完全违背了延迟加载的目的）如果您有与它们捆绑在一起的服务需要位于根目录中，请将这些服务分离到根目录的不同服务模块中

应用程序模块.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 {}

应用程序组件.ts

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

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

应用程序路由.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) 如果不小心，可能会导致意外行为

男童.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 {}

女性儿童.module.ts

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 {}

约翰-孩子.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 {}