Property 'timeout' does not exist on type 'Observable<Object>'

Question

I am trying to upgrade to Angular 6 from 5 and got this error:

ERROR in src/app/services/http.service.ts(17,14): error TS2339: Property 'timeout' does not exist on type 'Observable'.

My code in http.service.ts:

import { throwError as observableThrowError,  Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { environment } from "environments/environment";
import { AppService } from 'app/app.service';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class HttpService {

    private baseUrl = environment.apiUrl;

    constructor(private http: HttpClient, private appService: AppService) { }

    public get(endpoint: string): Observable<any>{
        return this.http.get(this.baseUrl + endpoint)
            .timeout(this.appService.timeoutInterval)
            .retryWhen(error => error.delay(this.appService.waitInterval)
                .take(this.appService.numberOfRetries)
                .concat(observableThrowError(new Error())))
            .share();
    }
}

What am I missing here?

Answer 1

You'll have to add a .pipe and then use any of your operators within it since Rxjs 6.

Change your implementation like this:

import { throwError ,  Observable, timer } from 'rxjs';
import { Injectable } from '@angular/core';
import { environment } from "environments/environment";
import { AppService } from 'app/app.service';
import { HttpClient } from '@angular/common/http';

import { 
  timeout,
  retryWhen,
  take,
  concat,
  share,
  delayWhen
} from 'rxjs/operators';

@Injectable()
export class HttpService {

  private baseUrl = environment.apiUrl;

  constructor(
    private http: HttpClient, 
    private appService: AppService
  ) {}

  public get(endpoint: string): Observable < any > {
    return this.http.get(this.baseUrl + endpoint)
      .pipe(
        timeout(2500),
        retryWhen(errors =>
          errors.pipe(
            delayWhen(val => timer(val * 1000))
          )
        ),
        take(2),
        concat(throwError('This is an error!')),
        share()
      );
  }
}

PS: I took the liberty to change your AppService. references with my own implementation as you didn't share your AppService code.

Answer 2

You should be updating with ng update - see https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4 (scroll down a little)

As per this link, this will auto install rxjs-compat which will enable support for RxJs v5 and v6

You could however install rxjs-compat manually if you want.

This will ease the transition for ng5 to ng6 and then (optionally) pull it out later in a more RxJs focused task.