Angular中在app.routing.module.ts的NgModule内动态配置路由

你的问题核心在于：RouterModule.forRoot()是在模块初始化阶段执行的，此时AppRoutingModule的实例还未创建，featureToggleService也未注入，所以直接调用类方法获取路由的方式行不通。下面提供两种可行方案：

方案一：应用启动前初始化路由（推荐，完全移除不需要的路由） #

通过APP_INITIALIZER在应用启动前获取开关状态，提前生成对应的路由数组，确保RouterModule.forRoot()拿到的是最终路由：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureToggleService } from './path-to-feature-toggle.service';
import { LoginGuard } from './path-to-login.guard';

// 先声明空路由数组，后续初始化时赋值
let routes: Routes = [];

const productionRoutes = [
    {
        path: 'a',
        loadChildren: () => import('module').then((r) => r.A),
        canLoad: [LoginGuard]
    }
] as Routes;

const developmentRoutes = [
    {
        path: 'a',
        loadChildren: () => import('module').then((r) => r.A),
        canLoad: [LoginGuard]
    },
    {
        path: 'b',
        loadChildren: () => import('module').then((r) => r.B),
        canLoad: [LoginGuard]
    },
    {
        path: 'c',
        loadChildren: () => import('module').then((r) => r.C)
    }
] as Routes;

// 初始化路由的工厂函数，会在应用启动前执行
export function initializeRoutes(featureToggleService: FeatureToggleService) {
  return () => {
    const isProduction = featureToggleService.productionRoutes();
    routes = isProduction ? productionRoutes : developmentRoutes;
  };
}

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {
            paramsInheritanceStrategy: 'always'
        })
    ],
    exports: [RouterModule],
    providers: [
        {
            provide: APP_INITIALIZER,
            useFactory: initializeRoutes,
            deps: [FeatureToggleService], // 注入依赖服务
            multi: true // 允许多个初始化器
        }
    ]
})
export class AppRoutingModule {}

方案二：用路由守卫动态控制访问（适合需要动态切换开关的场景） #

如果不需要完全移除路由，只是根据开关控制是否允许访问，可以给开发环境路由添加CanLoad守卫，在生产环境时拦截访问：

1. 创建路由开关守卫 #

import { Injectable } from '@angular/core';
import { CanLoad, Route, UrlSegment } from '@angular/router';
import { FeatureToggleService } from './path-to-feature-toggle.service';

@Injectable({
  providedIn: 'root'
})
export class FeatureToggleGuard implements CanLoad {
  constructor(private featureToggleService: FeatureToggleService) {}

  canLoad(route: Route): boolean {
    // 生产环境下，禁止加载b、c路由
    if (this.featureToggleService.productionRoutes()) {
      return route.path !== 'b' && route.path !== 'c';
    }
    // 开发环境允许所有路由加载
    return true;
  }
}

2. 修改路由配置 #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginGuard } from './path-to-login.guard';
import { FeatureToggleGuard } from './path-to-feature-toggle.guard';

const routes: Routes = [
    {
        path: 'a',
        loadChildren: () => import('module').then((r) => r.A),
        canLoad: [LoginGuard]
    },
    {
        path: 'b',
        loadChildren: () => import('module').then((r) => r.B),
        canLoad: [LoginGuard, FeatureToggleGuard] // 添加守卫
    },
    {
        path: 'c',
        loadChildren: () => import('module').then((r) => r.C),
        canLoad: [FeatureToggleGuard] // 添加守卫
    }
];

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

方案对比 #

• 方案一：路由数组在启动前就确定，生产环境下不会包含开发路由，更安全且性能更好。
• 方案二：保留所有路由，通过守卫动态拦截，适合需要在运行时切换开关状态的场景（比如用户权限变更后切换环境）。

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