如何在angular-auth-oidc-client的Auth配置模块加载config.json配置

错误原因 #

你的AuthModule.forRoot中useFactory的写法错误，返回的是工厂函数本身，而非调用该函数后生成的StsConfigHttpLoader实例，导致框架无法找到loadConfigs方法。

修复步骤 #

修改AuthModule.forRoot中的loader配置，将useFactory直接指向工厂函数（Angular会自动注入HttpClient依赖）：

@NgModule({
  imports: [
    AuthModule.forRoot({
      loader: {
        provide: StsConfigLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient],
      }
    }),
  ],
  exports: [AuthModule],
})
export class AuthConfigModule { }

额外检查点 #

• 字段拼写修正：映射代码中存在拼写错误：autoUserInfo: customConfig.autoUserInfO，需改为autoUserInfo: customConfig.autoUserInfo，避免配置项失效。
• JSON路径验证：确认./assets/environments/front.appsettings.json路径正确，且该目录已在angular.json的assets配置中被包含，确保文件能被打包加载。
• 版本兼容性：确保angular-auth-oidc-client版本与文档匹配，不同版本的配置逻辑可能存在差异。

修复后的完整代码示例 #

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { AuthModule, StsConfigHttpLoader, StsConfigLoader } from 'angular-auth-oidc-client';
import { map } from 'rxjs';

export const httpLoaderFactory = (httpClient: HttpClient) => {
  console.log("http loader entered ");
  const config$ = httpClient.get('./assets/environments/front.appsettings.json').pipe(
    map((customConfig: any) => {
      return {
        authority: customConfig.authority,
        authWellknownEndpointUrl: customConfig.authWellknownEndpointUrl,
        redirectUrl: customConfig.redirectUrl,
        clientId: customConfig.clientId,
        scope: customConfig.scope,
        responseType: customConfig.responseType,
        silentRenew: customConfig.silentRenew,
        maxIdTokenIatOffsetAllowedInSeconds: customConfig.maxIdTokenIatOffsetAllowedInSeconds,
        issValidationOff: customConfig.issValidationOff,
        autoUserInfo: customConfig.autoUserInfo,
        silentRenewUrl: customConfig.silentRenewUrl,
        useRefreshToken: customConfig.useRefreshToken,
        postLogoutRedirectUri: customConfig.postLogoutRedirectUri
      };
    })
  );

  return new StsConfigHttpLoader(config$);
};

@NgModule({
  imports: [
    HttpClientModule,
    AuthModule.forRoot({
      loader: {
        provide: StsConfigLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient],
      }
    }),
  ],
  exports: [AuthModule],
})
export class AuthConfigModule { }

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