用于ANGLE 6+应用程序的运行时配置-前端问题

Runtime Configuration for Angular 6+ Applications(用于ANGLE 6+应用程序的运行时配置)

本文介绍了用于ANGLE 6+应用程序的运行时配置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在运行时加载特定于环境的配置时，推荐的最佳实践是什么？ANGLE文档提到了APP_INITIALIZER的使用，但对于使用.forRoot()约定的导入模块的运行时配置等加载过程来说，这还不够早。

在我的用例中，我有一个通过核心模块构建和导入的身份验证服务，该模块由App模块导入。我正在使用的验证库(angular-oauth2-oidc库)允许在导入模块时配置自动附加访问令牌(参见this segment)。由于我正在使用的生成环境中存在仅允许我生成一个公共生成包以部署到所有环境的约束，因此我无法使用不同的环境.ts文件来动态设置值。

最初的想法是使用index.html页面上的Fetch API将包含配置的JSON文件加载到全局变量上，但由于调用是异步的，因此在导入Core模块时可能不会完全加载配置。

推荐答案

这是我的配置设置的一部分，以使我的应用程序通过构建管道，并花了我几天的时间。我最终使用APP_INITIALIZER加载REST服务并为我的应用程序构建AppConfigService的解决方案。我正在使用相同的angular-oauth2-oidc库。

我对此问题的解决方案是不在其forRoot()方法中设置OAuthModule。它是在通过APP_INITIALIZER的任何配置可用之前调用的，这会导致在应用到指定给forRoot()方法的配置对象时产生未定义的值。

但我们在http标头中需要一个令牌。因此，我使用了http拦截器来附加令牌，如here所述。诀窍是在工厂中设置OAuthModuleConfig。显然，这是在应用程序初始化之后调用的。

配置模块

@NgModule({
  imports: [
    // no config here
    OAuthModule.forRoot(),
  ],
  providers: [
   {
    provide: HTTP_INTERCEPTORS,
    useFactory: authenticationInterceptorFactory,
    deps: [OAuthStorage, AuthenticationErrorHandler, OAuthModuleConfig],
    multi: true
   }
 ]
})

拦截器工厂

const authenticationInterceptorFactory = (oAuthService: OAuthStorage, authenticationErrorHandler: AuthenticationErrorHandler, oAuthModuleConfig: OAuthModuleConfig) => {
const config = {
 resourceServer: {
  allowedUrls: [
   // Include config settings here instead
   AppConfigService.settings.apiURL,
   AppConfigService.settings.anotherApiURL,
  ]
  sendAccessToken: true
 },
}
return new AuthenticationInterceptor(oAuthService, authenticationErrorHandler, config);
};

这篇关于用于ANGLE 6+应用程序的运行时配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！