Angular 2中如何将app-routing.module.ts的路由代码拆分至独立文件？

没问题，这在Angular里是非常常见的代码拆分操作，能有效避免app-routing.module.ts过于臃肿，让路由配置更清晰易维护。我给你一步步拆解具体怎么做：

1. 创建独立的路由文件 #

首先在你的项目中新建一个product.routes.ts文件（建议放在产品相关组件的目录下，或者专门的路由目录里），然后在这个文件中定义并导出你的产品路由数组：

// product.routes.ts
import { Routes } from '@angular/router';
// 导入你需要关联的产品组件
import { ProductListComponent } from './product-list.component';
import { ProductDetailComponent } from './product-detail.component';

// 定义路由数组并导出
export const productRoutes: Routes = [
  { path: 'products', component: ProductListComponent },
  { path: 'products/:id', component: ProductDetailComponent },
  // 可以继续添加更多产品相关路由
];

2. 在主路由模块中导入并使用独立路由 #

接下来打开app-routing.module.ts，导入刚才创建的productRoutes，然后把它合并到主路由数组中。这里分两种常见情况：

情况一：产品路由作为一级路由 #

如果产品路由是顶级路由（直接跟在域名后的路径），用扩展运算符...把productRoutes合并到主路由数组即可：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
// 导入独立的产品路由
import { productRoutes } from './product.routes';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  // 合并产品路由
  ...productRoutes,
  // 通配符路由，务必放在最后
  { path: '**', redirectTo: '' }
];

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

情况二：产品路由作为子路由 #

如果产品路由需要嵌套在某个父路径下（比如所有产品路径都以/shop开头），可以把productRoutes作为父路由的children属性值：

// app-routing.module.ts
const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'shop',
    // 产品路由作为shop路径的子路由
    children: productRoutes
  },
  { path: '**', redirectTo: '' }
];

3. 验证配置 #

完成上述操作后，记得检查：

• 组件的导入路径是否正确，避免出现找不到组件的错误
• 路由的path是否存在冲突（比如两个路由定义了相同的路径）
• 确保productRoutes已经被正确导出和导入

这样就完成了路由代码的迁移，app-routing.module.ts会清爽很多，后续维护产品相关路由也只需要修改product.routes.ts即可。

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