如何在Angular路由模块中设置来自AppConfigService的动态路由data数据

问题核心原因 #

你的写法存在两个本质问题，编译报错只是表象：

1. 路由配置routes是定义在AppRoutingModule类外部的静态常量，代码加载阶段就会执行求值，此时this根本不指向AppRoutingModule实例，完全无法拿到构造函数中注入的配置值；且Angular AOT编译阶段就会解析装饰器内的路由参数，而你的配置是APP_INITIALIZER运行时才加载的，编译阶段根本不存在对应数据。
2. AOT编译要求装饰器引用的外部变量必须导出，所以会提示你导出routes，但就算导出也解决不了运行时拿配置的核心问题。

推荐解决方案：调整AuthGuard逻辑动态取角色 #

你本身已经用了AuthGuardService做路由拦截，最优方案是把角色校验的取值逻辑移到守卫里，利用APP_INITIALIZER先加载配置、后启动路由的特性，直接从AppConfigService取配置值做校验：

1. 先修改app-routing.module.ts，导出routes解决编译报错，路由data里只存配置对应的标识即可：

// 导出routes解决AOT编译报错
export const routes: Routes = [
  ...
  { 
    path: 'openOrders', 
    component: OpenOrderListComponent, 
    canActivate: [AuthGuardService], 
    // 这里存配置对应的键名，不要尝试读取运行时配置
    data: { roleKey: 'openOrdersRequiredRole' } 
  },
  ...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  // AppConfigService已经在root声明，不需要重复提供
  providers: [AuthGuardService]
})
export class AppRoutingModule { }

2. 修改AuthGuardService，注入AppConfigService动态取角色做校验：

@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(
    private configService: AppConfigService,
    // 你原有依赖的Keycloak等服务
  ) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 从路由data取配置键名
    const roleKey = route.data.roleKey;
    // 此时APP_INITIALIZER已经执行完成，配置已经加载完成
    const requiredRole = this.configService.configuration[roleKey];
    // 走你原有角色校验逻辑即可，比如判断当前用户是否持有对应角色
    // ... 原有校验逻辑
  }
}

这个方案完全适配你现有的运行时配置逻辑，不需要改动现有初始化流程，稳定性最高。

备选方案：动态构造路由 #

如果你确实需要把角色值直接写到路由data中，可以在配置加载完成后调用Router.resetConfig动态重置路由：

1. 先把需要动态配置的路由从静态routes中移除
2. 在APP_INITIALIZER的初始化逻辑中，配置加载完成后注入Router实例，拼接完整路由配置后调用router.resetConfig(完整路由数组)即可。

内容的提问来源于stack exchange，提问作者husker-du