Async initialization of Angular 2 service Async initialization of Angular 2 service typescript typescript

Async initialization of Angular 2 service


After working with Thierry's answer for a bit, I discovered that it would only work once, but it did set me on the right path. I had to instead store the promise of the user, and create a new observable which is then flatMap-ed.

@Injectable()export class Api {  private userPromise: Promise<User>;  constructor(private http: Http) {    this.userPromise = LocalStorage.get('user').then(json => {      if (json !== "") {        return JSON.parse(json);      }      return null;    });          }  public getSomethingFromServer() {      return Observable.fromPromise(this.userPromise).flatMap((user) => {        return this.http.get(...).map(...);      });    }  }}

This ensures that the flatMap function gets the user every time it is called, instead of just the first time, as in Thierry's answer.


You could leverage an observable to do that with the flatMap operator. If the user isn't there, you could wait for it and then chain the target request.

Here is a sample:

@Injectable()export class Api {  private user;  private storage;  private userInitialized = new Subject();  constructor(private http: Http) {    this.storage = LocalStorage;    this.storage.get('user').then(json => {      if (json !== "") {        this.user = JSON.parse(json);        this.userInitialized.next(this.user);      }    });          }  // one of many methods  public getSomethingFromServer(): Observable<...> {    // make a http request that depends on this.user    if (this.user) {      return this.http.get(...).map(...);    } else {      return this.userInitialized.flatMap((user) => {        return this.http.get(...).map(...);      });    }  }}