.then() is never called on Observable.toPromise()

Question

I try to authenticate my backend calls with a token from angularfire2 authentication library. I subscribe to the authState to get the user token and add it as a RequestOption to my http request.

If I set a breakpoint in chrome debugger it executes the return lines in getAuthOptions() successfully, but after this.getAuthOptions().toPromise() the app calls neither the .then() nor the .catch() functions.

Is there an error with the Observable usage? Is there any other approach I can try?

  getPoints(): Promise<Object[]> {
    return this.getAuthOptions().toPromise()
      .then(options => this.http.get(this.baseUrl, options).toPromise())
      .then(_ => _.json().data)
      .catch(console.log);
  }

  getPointsFor(isin: String): Promise<Object> {
    return this.getAuthOptions().toPromise()
      .then(options => this.http.get(this.baseUrl + isin, options).toPromise())
      .then(_ => _.json().data[0])
      .catch(console.log);
  }

  private getAuthOptions(): Observable<RequestOptions> {
    return this.afAuth.authState.map(res => {
      if (res && res.uid) {
        const token = res.getIdToken(true);
        return new RequestOptions({
          headers: new Headers({
            Auth: `${token}`
          })
        });
      } else {
        return new RequestOptions();
      }
    });
  }

Answer 1

The promise returned by the toPromise operator resolves when the observable completes or errors. The AngularFire2 authState observable does not complete, so the promise will not resolve unless an error occurs.

You can use the take operator to compose an observable that takes the first emitted authentication state and then completes:

import "rxjs/add/operator/take";

private getAuthOptions(): Observable<RequestOptions> {
  return this.afAuth.authState
    .take(1)
    .map(res => {
      if (res && res.uid) {
        const token = res.getIdToken(true);
        return new RequestOptions({
          headers: new Headers({
            Auth: `${token}`
          })
        });
      } else {
        return new RequestOptions();
      }
    });
}