Angular (v5) 服务正在 APP_INITIALIZER 承诺解析之前构建

我期待 Angular 等到我的loadConfig()函数在构建其他服务之前解析，但事实并非如此。

应用程序模块.ts

export function initializeConfig(config: AppConfig){
    return () => config.loadConfig();
}

@NgModule({
     declarations: [...]
     providers: [
          AppConfig,
         { provide: APP_INITIALIZER, useFactory: initializeConfig, deps: [AppConfig], multi: true }
     ] })
export class AppModule {

}

应用程序配置.ts

@Injectable()
export class AppConfig {

    config: any;

    constructor(
        private injector: Injector
    ){
    }

    public loadConfig() {
        const http = this.injector.get(HttpClient);

        return new Promise((resolve, reject) => {
            http.get('http://mycoolapp.com/env')
                .map((res) => res )
                .catch((err) => {
                    console.log("ERROR getting config data", err );
                    resolve(true);
                    return Observable.throw(err || 'Server error while getting environment');
                })
                .subscribe( (configData) => {
                    console.log("configData: ", configData);
                    this.config = configData;
                    resolve(true);
                });
        });
    }
}

其他一些服务.ts

@Injectable()
export class SomeOtherService {

    constructor(
        private appConfig: AppConfig
    ) {
         console.log("This is getting called before appConfig's loadConfig method is resolved!");
    }
 }

的构造函数SomeOtherService在从服务器接收数据之前被调用。这是一个问题，因为这样的字段SomeOtherService没有设置为正确的值。

我如何确保SomeOtherService的构造函数仅在之后被调用loadConfig的请求解决了吗？

我也遇到了类似的问题，为我解决这个问题是使用 Observable 方法和运算符来完成所有操作。然后最后只需使用toPromise的方法Observable返回一个Promise。这也更简单，因为您不需要自己创建承诺。

The AppConfig服务将看起来像这样：

import { Injectable, Injector } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { tap } from 'rxjs/operators/tap';

@Injectable()
export class AppConfig {

    config: any = null;

    constructor(
        private injector: Injector
    ){
    }

    public loadConfig() {
        const http = this.injector.get(HttpClient);

        return http.get('https://jsonplaceholder.typicode.com/posts/1').pipe(
          tap((returnedConfig) => this.config = returnedConfig)
        ).toPromise();
        //return from([1]).toPromise();
    }
}

我正在使用新的可管道操作符 https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md在 rxjs 中，这是 Google 为 Angular 5 推荐的。tap运算符相当于旧的do操作员。

我还在 stackblitz.com 上创建了一个工作示例，以便您可以看到它工作。示例链接 https://stackblitz.com/edit/angular-5nhqbp?file=app%2Fapp-config.ts