如何在Angular的AppModule中为forRoot传入依赖服务参数？

你遇到的核心问题是：OauthModule.forRoot()在模块解析阶段就会执行，而APP_INITIALIZER是在模块初始化完成后、组件启动前才执行，这时候不仅ConfigService还没加载远程配置，而且模块装饰器里也无法直接注入依赖实例。下面给出两种可行的解决方案：

方案一：用注入令牌延迟提供OAuth配置（推荐） #

这种方式适配大多数第三方OAuth模块，核心是把OAuth配置注册为可注入的令牌，让模块在运行时获取配置，而非模块解析阶段硬编码传入。

1. 定义OAuth配置的注入令牌

import { InjectionToken } from '@angular/core';
import { OauthConfig } from '你的oauth模块路径';

export const OAUTH_CONFIG = new InjectionToken<OauthConfig[]>('oauth.config');

2. 编写配置提供工厂

export function provideOauthConfig(configService: ConfigService): OauthConfig[] {
  return configService.getOauthConfig();
}

3. 修改AppModule配置
   把OAuth配置的提供者加入providers，同时调整OauthModule的导入方式（如果模块支持通过注入令牌获取配置）：

@NgModule({
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeAppFactory,
      deps: [HttpClient, ConfigService],
      multi: true
    },
    // 注册OAuth配置的提供者
    {
      provide: OAUTH_CONFIG,
      useFactory: provideOauthConfig,
      deps: [ConfigService]
    }
  ],
  imports: [
    // 如果OauthModule支持传入注入令牌，比如：
    // OauthModule.forRoot({ configurations: inject(OAUTH_CONFIG) })
    // 若模块不支持直接用inject，可查看其文档是否支持动态配置
  ],
  bootstrap: [AppComponent],
  declarations: [AppComponent]
})
export class AppModule {}

方案二：手动引导+动态加载OAuth模块 #

如果你的OAuth模块必须在forRoot里传入静态配置，可以通过手动引导应用，在APP_INITIALIZER执行完毕后再动态加载模块：

1. 修改AppModule，移除自动引导和OauthModule的静态导入

@NgModule({
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeAppFactory,
      deps: [HttpClient, ConfigService],
      multi: true
    }
  ],
  imports: [], // 移除OauthModule的静态导入
  declarations: [AppComponent],
  // 移除bootstrap配置，改为手动引导
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap(appRef: ApplicationRef) {
    // 从ConfigService获取已加载的配置
    const configService = this.injector.get(ConfigService);
    const oauthConfig = configService.getOauthConfig();

    // 动态创建并加载Oauth模块
    const oauthModule = OauthModule.forRoot({ configurations: oauthConfig });
    this.injector.loadModule(oauthModule);

    // 手动启动根组件
    appRef.bootstrap(AppComponent);
  }
}

补充说明 #

如果使用的是angular-oauth2-oidc这类主流OAuth库，推荐使用其最新的provideOAuthClientAPI替代OAuthModule.forRoot，可以更灵活地结合APP_INITIALIZER完成配置初始化：

export function initializeOAuth(oauthService: OAuthService, configService: ConfigService) {
  return () => {
    const oauthConfig = configService.getOauthConfig();
    oauthService.configure(oauthConfig);
    // 可选：提前执行discover等操作
    return oauthService.loadDiscoveryDocumentAndTryLogin();
  };
}

@NgModule({
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeAppFactory,
      deps: [HttpClient, ConfigService],
      multi: true
    },
    {
      provide: APP_INITIALIZER,
      useFactory: initializeOAuth,
      deps: [OAuthService, ConfigService],
      multi: true
    },
    provideOAuthClient()
  ],
  imports: [],
  bootstrap: [AppComponent],
  declarations: [AppComponent]
})
export class AppModule {}

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