Question

我正在尝试将所有配置值从 environment.ts 移到 config.json ，因此我可以将同一内部版本用于多个不同的环境（开发，暂存）和生产）。

我一直遵循这里写的建议VSTS build - replace Angular4 environment variables in Release stage，但就我而言，我正在另一个模块（即 core.module ）中使用某些配置值， m设置Azure MSAL详细信息，例如客户端ID，重定向Uri等。

我遇到一个错误，说尚未加载设置Azure MSAL所需的配置值。

config.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Config } from 'src/app/model/config';

export let CONFIG: Config;

@Injectable()
export class ConfigService {

  constructor(private http: HttpClient) { }

  public load() {
    return new Promise((resolve, reject) => {
      this.http.get('/assets/config/config.json')
        .subscribe((envResponse: any) => {
          const t = new Config();
          CONFIG  = Object.assign(t, envResponse);
          resolve(true);
        });

    });
  }
}

export function configFactoryService(configService: ConfigService): Function {
  return () => configService.load();
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { LOCALE_ID, NgModule, APP_INITIALIZER } from '@angular/core';

// Load the required calendar data for the de locale
import '@progress/kendo-angular-intl/locales/en-DK/all';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { routingModule } from './app.routing';
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { HomeModule } from './modules/home/home.module';
import { ConfigService, configFactoryService } from './core/services/config.service';
import { HttpClient, HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    BrowserAnimationsModule,
    HomeModule,
    SharedModule,
    CoreModule,
    routingModule,
    HttpClientModule
  ],
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: configFactoryService,
      deps: [
        ConfigService,
        HttpClient
      ],
      multi: true
    },
    { provide: LOCALE_ID, useValue: 'en-DK' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

core.module.ts

import { NgModule } from '@angular/core';
import { NavigationComponent } from './components/navigation/navigation.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { AuthMSALCustomInterceptor } from './interceptors/auth.msal.custom.interceptor';
import { MsalModule } from '@azure/msal-angular';
import { CONFIG as environment } from './services/config.service';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    HttpModule,
    MsalModule.forRoot({
      clientID: environment.clientID,
      authority: environment.authority,
      validateAuthority: true,
      redirectUri: environment.redirectUri,
      popUp: false,
      consentScopes: [
        `api://${environment.sApplicationId}/access_as_user`,
        `api://${environment.wApplicationId}/access_as_user`,
        `api://${environment.oApplicationId}/access_as_user`,
      ],
      protectedResourceMap: [
        [
          environment.sUrl,
          [`api://${environment.sApplicationId}/access_as_user`]
        ],
        [
          environment.wUrl,
          [`api://${environment.wApplicationId}/access_as_user`]
        ],
        [
          environment.oUrl,
          [`api://${environment.oApplicationId}/access_as_user`]
        ]
      ]
    })
  ],
  exports: [
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    NavigationComponent
  ],
  declarations: [NavigationComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthMSALCustomInterceptor,
      multi: true
    }
  ],
})
export class CoreModule { }

我需要能够加载配置值并在 core.module 中使用它们。有没有办法在模块初始化之前加载config.json值？

编辑：显示错误发生位置的屏幕截图-core.module error

Answer 1

经过大量的挖掘，包括此链接中的原始博客文章，我在最喜欢的评论（https://link.medium.com/QleSbGcCb7）中找到了一个实现，它相对简单易懂。希望这可以帮助。有关完整的实现，请参见链接，但这是要点。请注意，您需要一个配置文件和一个用于配置的模型。

fetch('./config.json')
  .then((response) => response.json())
  .then((config: ShellModuleConfig) => {
     if (environment.production) {
        enableProdMode();
     }

    platformBrowserDynamic(
      [{ provide: SHELL_RUNTIME_CONFIG, useValue: config }]
    )
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
  });

Answer 2

这个问题有点老了，但是其他人可能也会遇到类似的问题。问题在于您正在注入HttpClient，因此Angular需要首先解决所有HTTP_INTERCEPTORS。这也意味着MsalInerceptor已加载，因此MsalService在APP_INITIALIZER之前加载，因此未加载配置。

您需要做的是摆脱HttpClient的注入。而是注入HttpBackend（确保您使用HttpBackend而不是HttpHandler）并在本地创建HttpClient。请参阅此GitHub问题中的完整示例： https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1403

如何加载config.json并在另一个模块中使用配置值？

2 个答案: