Angular 2 HTTP property retryWhen doesn't exist on type Observable<any>

Question

I am trying to retry my requests so that I can get a refresh token before sending the user to log in again however I am getting an error when I try to use retryWhen on the request and I'm not sure why.

http.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Headers, RequestOptions, Response } from '@angular/http';

@Injectable()
export class HttpService {

  constructor(
    private http: Http
  ) { }

  public get(url: string, headers?: Headers): Observable<any> {
    return this.http.get(url, this.getHeaders(headers))
      .map(this.extractData)
      .retryWhen((error: any) => { ... }) // [ts] Property 'retryWhen' does not exist on type 'Observable<any>'.
      .catch(this.handleError);
  }
}

Answer 1

You must import the operator first before using it(it works the same for other operators)

Put this in your imports at the top of the file:

import 'rxjs/add/operator/retryWhen';

It adds this operator on-top of the Observable prototype.

Answer 2

After using it for a couple days the original solution posted by Omri caused some issues where the property couldn't be found occasionally. (It worked in some builds and not others). I ended up finding a better solution that works more consistently and doesn't require an additional import.

Instead of importing Observable from rxjs/Observable import it from rxjs/Rx.

This DOES NOT work:

import { Observable } from 'rxjs/Observable';

This DOES work:

import { Observable } from 'rxjs/Rx';