title: Angular Observable being called multiple times
body: <p>I have a service in which I defined a global observable like so:  </p>
  
  <pre><code> @Injectable()
    export class XYZService {
      country: Observable&lt;any&gt;;
      isBrowser: boolean;
  
      constructor(private http: Http,
                  private httpClient: HttpClient,
                  private router: Router,
                  @Inject(PLATFORM_ID) private platformId: any) {
        this.isBrowser = isPlatformBrowser(platformId);
        if(this.isBrowser &amp;&amp; !this.country) {
        this.country = this.http.get('https://ipinfo.io')
          .map(res =&gt; res.json())
          .catch(() =&gt; {
            return Observable.of({'country': 'SG'});
          }); 
        };
      }
  
      getLocation(): Observable&lt;any&gt; {
        return this.country;
      }
  </code></pre>
  
  <p>Now in several of my components I'm calling the getLocation function in the constructor or ngOnInit like so:</p>
  
  <pre><code>this.XYZService.getLocation()
    .subscribe(res =&gt; {
      this.country = res['country'];
  });
  </code></pre>
  
  <p>My expectation is that the request to ipinfo.io would only be made once. However that is not happening. From the network logs I can see that the request to ipinfo is being made multiple times. Looks to be some timing issue. If I add a debugger or console.log statement within the constructor, it is only called once. However more than one request are sent.</p>