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

Question

我希望 Angular 等到我的 loadConfig() 函数解析后再构建其他服务，但事实并非如此。

app.module.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 {

}

app.config.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);
                });
        });
    }
}

some-other-service.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 的请求得到解决后才被调用？

Answer 1

我认为您可以检查在调用堆栈中调用“SomeOtherService”的位置。就我而言，除了 APP_INITIALIZER 之外，我还添加了 HTTP_INTERCEPTORS，其中“SomeOtherService”被注入其中。这使得服务在 APP_INITIALIZER 完成之前被调用。

Answer 2

我认为您不应该订阅 http get 调用，而是在解决 loadConfig 承诺之前将其转换为承诺，因为订阅的回调可能会在请求返回之前调用，因此会提前解决承诺。试试：

@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 )
                .toPromise()
                .catch((err) => {
                    console.log("ERROR getting config data", err );
                    resolve(true);
                    return Observable.throw(err || 'Server error while getting environment');
                })
                .then( (configData) => {
                    console.log("configData: ", configData);
                    this.config = configData;
                    resolve(true);
                });
        });
    }
}

我只是在超时的情况下尝试了它，但它奏效了。我希望toPromise() 在正确的位置，因为我并没有真正使用地图功能。

Answer 3

我面临着类似的问题。我认为这里没有公布的差异导致在其他答案示例中工作正常，但对于作者来说不是 SomeOtherService 注入的地方。如果它被注入到其他一些服务中，初始化器可能还没有被解析。我认为初始化程序会延迟将服务注入组件，而不是其他服务，这将解释为什么它在其他答案中起作用。就我而言，由于https://github.com/ngrx/platform/issues/931

，我遇到了这个问题

Answer 4

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

        const configData = await http.get('http://mycoolapp.com/env')
                    .map((res: Response) => {
                        return res.json();
                    }).catch((err: any) => {
                        return Observable.throw(err);
                    }).toPromise();
                this.config = configData;
        });
    }

await 运算符用于等待 Promise。它只能在异步函数中使用。

一切正常。

Answer 5

首先，您真的很接近正确的解决方案！

但在我解释之前，让我告诉你，在服务中使用subscribe 通常是代码异味。

也就是说，如果您查看APP_INITALIZER source code，它只是在所有可用的初始化程序上运行Promise.all。 Promise.all 本身在等待所有的 Promise 完成后再继续，因此，如果你希望 Angular 在启动应用程序之前等待它，你应该从你的函数中返回一个 Promise。

所以@AlesD 的answer 绝对是正确的选择。
（我只是想解释更多原因）

我最近在我的一个项目中进行了这样的重构（使用APP_INITALIZER），如果需要，可以查看 PR here。

现在，如果我必须重写你的代码，我会这样做：

app.module.ts

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

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

app.config.ts;

@Injectable()
export class AppConfig {
  config: any;

  constructor(private http: HttpClient) {}

  // note: instead of any you should put your config type
  public loadConfig(): Observable<any> {
    return this.http.get('http://mycoolapp.com/env').pipe(
      map(res => res),
      tap(configData => (this.config = configData)),
      catchError(err => {
        console.log('ERROR getting config data', err);
        return _throw(err || 'Server error while getting environment');
      })
    );
  }
}

Answer 6

Injector 不会等待 observables 或 Promise，也没有任何代码可以让它发生。

您应该使用自定义 Guard 或 Resolver 来确保在初始导航完成之前加载配置。

Answer 7

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

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();
    }
}

我在 rxjs 中使用了新的 pipeable operators，这是 Google 为 Angular 5 推荐的。tap 运算符等同于旧的 do 运算符。

我还在 stackblitz.com 上创建了一个工作示例，因此您可以确保它正常工作。 Sample link