Angular:在 APP_INITIALIZER 中发送 http 请求之前加载配置文件

Question

在我的 SPA 中，我使用的是 APP_INITIALIZER token ，它应该按照给定的顺序执行以下操作。
1) 加载与环境相关的配置文件(DEV、QA、PROD)。
2) 使用配置文件中的 API URL 为身份验证 token 发出 HTTP 请求
3) 使用配置文件中的 API URL 并将 token 附加到 HTTP 请求(这发生在 token 拦截器中)以加载一些其他配置数据)

早些时候，我使用硬编码的 URL 实现了 2 和 3，然后一切正常。当我将 API Urls 移动到配置并尝试从配置文件加载它们时， token 端点在配置文件请求被解析之前执行，因此 url 变得未定义。

请参阅下面的代码:

app.module.ts

export function initializeData(appConfig: AppConfig, authService: AuthService, appService: AppService, globalService: GlobalService) {
  return () => {
    try {
      return Promise.all([appConfig.load(), authService.authenticateClient(), appService.getClientConfig()]).then(() => {
        console.log('success')
        return Promise.resolve();
      }, (err) => {
        alert(err.error.error_description);
        return Promise.reject(err);
      });
    } catch (e) {
      alert(e.message);
      console.log(e);
    }

  }
}

@NgModule({
.............
.............
providers: [
    AppConfig,
    AuthService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeData,
      deps: [AppConfig, AuthService, TranslateService, AppService, GlobalService],
      multi: true
    },
    AppService
]
});

app.config.ts:

@Injectable()
export class AppConfig {
  static settings: IAppConfig;
  constructor(private http: HttpClient) { }
  load() {
    const jsonFile = `assets/config/config.${environment.name}.json`;

    return new Promise((resolve, reject) => {
      this.http.get(jsonFile).pipe(map((res: IAppConfig) => {
        AppConfig.settings = <IAppConfig>res;
        return AppConfig.settings;
      })).subscribe(() => {
        resolve();
        })
    }).catch ((response: any) => {
        console.log(`Could not load file '${jsonFile}': ${JSON.stringify(response)}`);
      });
  }
}

auth.service.ts( token 端点):

authenticateClient(){
    let body = new HttpParams()
      .set('client_id', AppConfig.settings.apiServer.client_id)
      .set('grant_type', AppConfig.settings.apiServer.grant_type)
      .set('scope', AppConfig.settings.apiServer.scope);

    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded'
      })
    };

    let authGatewayUrl: string = AppConfig.settings.apiServer.tokenUrl + window.location.search;

    return  this.http.post<any>(authGatewayUrl, body, httpOptions).toPromise().then(
        data => {
          this.token.next(data); 
          return this.token;
        },
        error => {
          return Promise.reject(error);
        }
      );  
  }

现在，当我在 app.config.ts 和 auth.service.ts 中添加断点时，在后一个文件中，AppConfig.Settings.apiServer.tokenUrl 在应用配置文件被解析之前被命中。因此它变得未定义。

我该如何解决这个问题？我知道我应该使用 switchmap，但我不确定如何使用它。

Answer 1

也许你可以在 .then 回调中控制序列:

appConfig.load()
  .then(()=>
     Promise.all[
       authService.authenticateClient(),
       appService.getClientConfig()
     ]
     .then....)