Angular(v15)如何让Azure AD依赖在APP_INITIALIZER完成后初始化

核心问题在于MSAL相关Provider（如MSALInstanceFactory）是模块初始化阶段同步执行的，而APP_INITIALIZER的异步加载逻辑不会自动阻塞这些Provider的创建。要解决这个问题，需要让MSAL的Factory依赖于加载完成的配置，并通过返回Promise让Angular等待配置加载完成后再初始化这些Provider。

步骤1：调整InitializerService，确保配置可异步获取 #

将配置存储为可复用的Observable或Promise，避免重复请求：

@Injectable({ providedIn: 'root' })
export class InitializerService {
  private azureAdConfig$: Observable<AzureAdConfig>;

  constructor(private http: HttpClient) {
    // 从JSON文件加载配置并缓存结果
    this.azureAdConfig$ = this.http.get<AzureAdConfig>('/assets/azure-ad-config.json').pipe(
      shareReplay(1)
    );
  }

  // 返回Observable版本
  getAzureAdConfig(): Observable<AzureAdConfig> {
    return this.azureAdConfig$;
  }

  // 返回Promise版本，方便Factory使用
  async getAzureAdConfigPromise(): Promise<AzureAdConfig> {
    return firstValueFrom(this.azureAdConfig$);
  }
}

步骤2：修改MSAL相关Factory，让它们等待配置加载 #

调整MSALInstanceFactory和MSALInterceptorConfigFactory，使其返回Promise，确保配置加载完成后再创建MSAL实例和拦截器配置：

// 创建MSAL实例的Factory
export async function MSALInstanceFactory(initializerService: InitializerService): Promise<IPublicClientApplication> {
  const config = await initializerService.getAzureAdConfigPromise();
  return new PublicClientApplication({
    auth: {
      clientId: config.clientId,
      authority: `https://login.microsoftonline.com/${config.tenantId}`,
      redirectUri: config.redirectUri
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE // 根据你的浏览器兼容需求调整
    }
  });
}

// 创建拦截器配置的Factory
export async function MSALInterceptorConfigFactory(initializerService: InitializerService): Promise<MsalInterceptorConfiguration> {
  const config = await initializerService.getAzureAdConfigPromise();
  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap: new Map([
      [config.apiResourceUrl, [config.apiScope]]
    ])
  };
}

步骤3：在AppModule中配置Provider #

确保MSAL相关Provider依赖于InitializerService，并使用返回Promise的Factory：

// APP_INITIALIZER确保应用启动前配置已加载（可选，但能强化启动顺序）
export function appInitializer(initializerService: InitializerService) {
  return () => initializerService.getAzureAdConfigPromise();
}

@NgModule({
  imports: [MsalModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializer,
      deps: [InitializerService],
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory,
      deps: [InitializerService]
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory,
      deps: [InitializerService]
    },
    MsalService,
    MsalGuard,
    MsalInterceptor
  ]
})
export class AppModule { }

关键原理 #

Angular会自动等待所有返回Promise的Provider完成解析后，再继续应用的初始化流程。通过让MSAL的Factory返回Promise并等待配置加载，就能确保配置就绪后再创建MSAL相关实例，避免因配置未加载导致的错误。

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