如何通过独立routing.module.ts为子模块构建嵌套路由结构？

要把你的嵌套路由结构拆分到独立的routing.module.ts文件，我们可以按根路由模块和Grouping子模块路由来拆分，既符合Angular模块化最佳实践，也能让路由结构更清晰易维护。

1. 根路由模块（AppRoutingModule） #

首先把根级别的路由（包括重定向路由和父级users/:userId/product/:productId路由）放到app-routing.module.ts中，只保留父路由框架，将grouping子路由的定义迁移到Grouping模块专属的路由文件：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

const routes: Routes = [
  {
    path: 'users/:userId/product/:productId',
    component: AppComponent,
    data: { animation: 'app' },
    children: [
      // 通过懒加载引入Grouping模块的路由（推荐，优化初始加载速度）
      {
        path: 'grouping',
        loadChildren: () => import('./grouping/grouping.module').then(m => m.GroupingModule)
      }
    ]
  },
  { 
    path: 'grouping', 
    redirectTo: 'users/:userId/product/:productId/grouping/overview', 
    pathMatch: 'full' 
  }
];

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

2. Grouping模块的路由（GroupingRoutingModule） #

创建grouping/grouping-routing.module.ts，把原grouping下的子路由（overview和configuration）移到这里，注意路由的相对路径规则：

// grouping/grouping-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GroupingComponent } from './grouping.component';
import { OverviewComponent } from './overview/overview.component';
import { GroupConfigurationComponent } from './configuration/group-configuration.component';

const routes: Routes = [
  // 空路径对应根路由中指向该模块的'grouping'路径
  {
    path: '',
    component: GroupingComponent,
    children: [
      { 
        path: 'overview', 
        component: OverviewComponent, 
        data: { animation: 'overview' } 
      },
      { 
        path: 'configuration', 
        component: GroupConfigurationComponent, 
        data: { animation: 'configuration' } 
      },
      // 新增默认重定向，访问grouping根路径时自动跳转到overview
      { path: '', redirectTo: 'overview', pathMatch: 'full' }
    ]
  }
];

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

3. 配置GroupingModule #

最后在grouping.module.ts中导入刚创建的GroupingRoutingModule，确保模块能识别并使用路由规则：

// grouping/grouping.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GroupingRoutingModule } from './grouping-routing.module';
import { GroupingComponent } from './grouping.component';
import { OverviewComponent } from './overview/overview.component';
import { GroupConfigurationComponent } from './configuration/group-configuration.component';

@NgModule({
  declarations: [
    GroupingComponent,
    OverviewComponent,
    GroupConfigurationComponent
  ],
  imports: [
    CommonModule,
    GroupingRoutingModule // 导入模块专属路由
  ]
})
export class GroupingModule { }

关键细节说明 #

• 路由相对路径：GroupingRoutingModule中的path: ''对应根路由里的path: 'grouping'，所以子路由overview的完整路径就是users/:userId/product/:productId/grouping/overview，和你原结构完全匹配。
• 懒加载选型：示例用了懒加载（loadChildren），这是Angular推荐的方式，能大幅优化应用初始加载速度；如果不需要懒加载，可将根路由中的loadChildren替换为直接的children导入，但记得要在AppRoutingModule中提前导入GroupingRoutingModule。
• 默认重定向：新增的根路径重定向能提升用户体验，避免访问grouping根路径时出现空白内容。

这样拆分后，每个模块的路由独立维护，结构更清晰，完全符合Angular模块化设计原则~

内容的提问来源于stack exchange，提问作者Steve Fitzsimons