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?
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.
Now instead of timeout
you should use debounceTime
. For example, from official doc :
this.heroes$ = this.searchTerms.pipe(
// wait 300ms after each keystroke before considering the term
debounceTime(300),
// ignore new term if same as previous term
distinctUntilChanged(),
// switch to new search observable each time the term changes
switchMap((term: string) => this.heroService.searchHeroes(term)),
);
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.
你必须执行命令
npm install rxjs-compat
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.