Angular 6+应用程序的运行时配置

Question

在Angular应用程序运行期间加载环境特定配置的建议最佳做法是什么？Angular文档提到了APP_INITIALIZER的使用,但在加载过程中,对于使用.forRoot()约定的导入模块的运行时配置等问题,这仍然不够早.

在我的用例中,我有一个通过Core模块构建和导入的身份验证服务,该模块由App模块导入.我正在使用的身份验证库(angular-oauth2-oidc库)允许在导入模块期间配置访问令牌的自动附加(请参阅此段).由于我正在使用的构建环境存在约束,只允许我生成一个公共构建包以部署到所有环境,我无法通过使用不同的environment.ts文件动态设置值.

最初的想法是使用index.html页面上的fetch API将包含配置的JSON文件加载到全局变量中,但由于调用是异步的,因此在导入时可能无法完全加载配置.核心模块发生.

Answer 1

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

我对此问题的解决方案是不在其 forRoot() 方法中设置 OAuthModule。它在任何配置viaAPP_INITIALIZER可用之前被调用 - 当应用于给定forRoot()方法的配置对象时，这会导致未定义的值。

但我们需要在 http 标头中添加一个令牌。因此，我使用 http 拦截器来附加令牌，如此处所述。诀窍是在工厂中设置 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);
};