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 stackoverflow.com/questions/49686406/… I realise your q is already answered but this may be useful for future reference — wal
– wal, Commented Jun 4, 2019 at 22:29

Vegard Larsen · Accepted Answer · 2016-04-06 07:14:42Z

6

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.

answered Apr 6, 2016 at 7:14

Vegard Larsen

13.1k14 gold badges61 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user448516 Over a year ago

What if user exist in LocalStorage ? Aren't you going to fetch it from http every time ?

dannrob Over a year ago

@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

Ondra Žižka · Accepted Answer · 2017-07-24 15:23:47Z

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, 2017 at 15:23

Ondra Žižka

47.2k49 gold badges228 silver badges298 bronze badges

answered Apr 3, 2016 at 16:22

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

4 Comments

Vegard Larsen Over a year ago

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?

Thierry Templier Over a year ago

This approach could interest you: stackoverflow.com/questions/36365134/… and stackoverflow.com/questions/36180108/…

Vegard Larsen Over a year ago

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?

Thierry Templier Over a year ago

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';.

Collectives™ on Stack Overflow

Async initialization of Angular 2 service

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related