Http request made multiple times in Angular2 service

Use Observable.share():

if (this.accountObservable === null) {
    this.accountObservable = this._http.get('./data/data.json')
      .share()
      .map(res => res.json())
      .catch(this.handleError);
}

Plunker

In the Plunker, AppComponent and Component2 both call getAccount().subscribe() twice.

With share(), the Chrome Developer tools Network tab shows one HTTP request for data.json. With share() commented out, there are 4 requests.

There are two types of observables.

Cold Observable : each subscriber receive all the events ( from the begining )

Hot observable : each subscriber receive the events that are emited after subscription.

Cold Observables are the default one. That's what the WS calling is triggered many times.

To make an Observable Hot you have to use following Rx's operators chain :

.publish().refCount()

In your case :

getAccount () {

    let accountObservable = this._http.get('http://localhost/api/account')
            .map(res => <Account> res.json().data)
            .catch(this.handleError);

    return accountObservable.publish().refCount();
}