Angular：如何完全解耦父子模块路由，无需在父路由注册子模块？

当然有办法实现这种完全解耦的模块懒加载方案！不用每次新增子模块都去修改父路由的children数组，下面给你两种实用的实现思路：

方案一：利用APP_INITIALIZER动态注册子路由 #

核心思路是在应用初始化阶段，自动收集所有子模块的路由配置，并合并到父路由的children中，完全不需要手动修改父路由文件。

步骤拆解：

1. 子模块导出独立路由配置
   每个子模块单独维护自己的路由数组，比如在child.module.ts旁创建child.routes.ts：

   import { Routes } from '@angular/router';
   
   export const childRoutes: Routes = [
     { 
       path: 'child', 
       // 懒加载子模块
       loadChildren: () => import('./child.module').then(m => m.ChildModule) 
     }
   ];
   

2. 创建路由收集服务
   写一个服务自动收集所有子模块的路由，这里用webpack的require.context实现自动扫描（不用手动导入每个子模块的路由）：

   import { Injectable } from '@angular/core';
   import { Routes } from '@angular/router';
   
   @Injectable({ providedIn: 'root' })
   export class FeatureRouteLoader {
     loadAllFeatureRoutes(): Routes {
       const featureRoutes: Routes = [];
       // 自动扫描src下所有以.routes.ts结尾的文件
       const routeFiles = require.context('../', true, /\.routes\.ts$/);
       
       routeFiles.keys().forEach(filePath => {
         const routeModule = routeFiles(filePath);
         // 取出每个路由文件导出的路由数组
         if (routeModule.default) {
           featureRoutes.push(...routeModule.default);
         }
       });
       
       return featureRoutes;
     }
   }
   

3. 在应用初始化时合并路由
   在根模块的providers里配置APP_INITIALIZER，让应用启动时自动把收集到的子路由合并到父路由中：

   import { NgModule, APP_INITIALIZER } from '@angular/core';
   import { Router, Routes } from '@angular/router';
   import { MyLayoutComponent } from './my-layout.component';
   import { FeatureRouteLoader } from './services/feature-route-loader.service';
   
   // 根路由基础配置
   const appRoutes: Routes = [
     { path: '', component: MyLayoutComponent, children: [] } // 初始children为空
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(appRoutes)],
     exports: [RouterModule],
     providers: [
       {
         provide: APP_INITIALIZER,
         useFactory: (loader: FeatureRouteLoader, router: Router) => () => {
           const featureRoutes = loader.loadAllFeatureRoutes();
           // 找到MyLayout对应的父路由
           const parentRoute = router.config.find(route => route.component === MyLayoutComponent);
           if (parentRoute && parentRoute.children) {
             // 合并子路由
             parentRoute.children.push(...featureRoutes);
           }
           // 重置路由配置，让新路由生效
           return router.resetConfig(router.config);
         },
         deps: [FeatureRouteLoader, Router],
         multi: true // 允许多个APP_INITIALIZER
       }
     ]
   })
   export class AppRoutingModule { }
   

方案二：使用独立组件+路由自注册（Angular 14+） #

如果你的项目用的是Angular 14及以上版本，可以直接用独立组件，每个组件可以自己注册路由，完全不需要模块，自然实现解耦：

// child.component.ts（独立组件）
import { Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@Component({
  selector: 'app-child',
  template: '<h1>Child Component</h1>',
  standalone: true,
  imports: [RouterModule]
})
export class ChildComponent { }

// 子组件的路由配置
export const childRoutes: Routes = [
  { path: 'child', component: ChildComponent }
];

然后同样用APP_INITIALIZER或者路由收集服务把这些独立组件的路由合并到父路由中，原理和方案一一致。

注意事项 #

• 路由优先级：动态加载的路由会追加到父路由children的末尾，所以如果有路由匹配冲突（比如通配符路由），要注意调整顺序。
• webpack扫描范围：require.context的路径和匹配规则要根据你的项目结构调整，避免扫描到不需要的文件。
• 兼容性：router.resetConfig在Angular 4及以上版本都支持，不用担心版本问题。

这样一来，新增子模块/独立组件时，只需要维护自己的路由文件，完全不用修改父模块的路由配置，完美实现功能模块和父模块的解耦！

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