Async initialization of Angular 2 service

Question

I have an Angular 2 service that needs to do async work when it is initalized, and should not be usable before this initialization has been completed.

@Injectable()
export class Api {
    private user;
    private storage;

    constructor(private http: Http) {
        this.storage = LocalStorage;
        this.storage.get('user').then(json => {
            if (json !== "") {
                this.user = JSON.parse(json);
            }
        });        
    }

    // one of many methods
    public getSomethingFromServer() {
        // make a http request that depends on this.user
    }
}

As it currently stands, this service is initialized, and returned immediately to any component that uses it. That component then calls getSomethingFromServer() in its ngOnInit, but at that point Api.user is not initialized, and therefore the wrong request is sent.

The lifecycle hooks (OnInit, OnActivate, etc) does not work with services, only components and directives, so I cannot use those.

Storing the Promise from get() call would require all the different methods that depend on user to wait for it, causing a lot of code duplication.

What is the recommended way to do async initialization of services in Angular 2?

using `APP_INITIALIZER` may be an approach in some scenarios e.g. if you want the init to be called just once, see an example here https://stackoverflow.com/questions/49686406/how-to-load-lists-http-calls-on-startup-to-application-scope-in-angular-5 I realise your q is already answered but this may be useful for future reference — wal, Jun 04 '19 at 22:29

score 6 · Accepted Answer · answered Apr 06 '16 at 07:14

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.

What if user exist in LocalStorage ? Aren't you going to fetch it from http every time ? — , Apr 19 '16 at 12:57
@MadHollander the OP just wanted to wait for the bootstrap of the service before executing the http call - the http call isn't going to get the user, its just getting 'something from server' which requires the user being resolved beforehand — dannrob, Feb 17 '17 at 03:42

score 5 · Answer 2 · edited Jul 24 '17 at 15:23

5

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

edited Jul 24 '17 at 15:23

Ondra Žižka

43,948
41
217
277

answered Apr 03 '16 at 16:22

Thierry Templier

198,364
44
396
360

1

The thought has occured to me. However, I have many of these `getSomethingFromServer`, and this would require all of them to do this little dance. Is there a way to have something like an async factory pattern for this? – Vegard Larsen Apr 03 '16 at 16:25
1

This approach could interest you: http://stackoverflow.com/questions/36365134/angular2-bootstrap-with-data-from-ajax-calls/36370302#36370302 and http://stackoverflow.com/questions/36180108/how-to-bootstrap-an-angular-2-application-asynchronously – Thierry Templier Apr 03 '16 at 16:49
The more I think about this, the better your solution sounds. I am having a go at implementing it, but I'm having a bit of trouble. Where is `Subject` from? Is it `Rx.Subject`? That doesn't seem to have an `emit` method. Generally, what imports do I need for this? – Vegard Larsen Apr 04 '16 at 06:26
Yes you're right! There is a typo: it's `next` instead of `emit` (`emit` is when using the `EventEmitter` class). `Subject` is from rxjs and can be imported this way: `import {Subject} from 'rxjs/Subject';` or `import {Subject} from 'rxjs/Rx';`. – Thierry Templier Apr 04 '16 at 10:14

Async initialization of Angular 2 service

2 Answers2

Linked