This error started to pop up after I migrated to TS 2.2.2, so I'm assuming that's the problem... The code did not stop working, but now I receive that error and I tried a few things like returning an empty observable, catching the re-thrown exception and returning an object, nothing seemed to work. Why is this happening now? Shouldn't it understand I'm re-throwing the exception and not expect a return? Am I misreading the error?
This is the complete error description:
Here's the complete code:
return request
.map((res: Response) => res.json())
.catch((error: any) => {
// todo: log?
if (error.status == 500) {
this.alertService.showError(error.statusText);
} else if (error.status == 588) {
this.alertService.showAlert(error.statusText);
}
Observable.throw(error.statusText);
});
I tried returning the Observable, but my wrapper method expects a return of type T
, which is the return of my deserialized request (map(...)
). If I do return the throw
this is the error I get:
[ts] Type 'Observable' is not assignable to type 'T'
I'm using:
- Angular4
- Typescript 2.2.2
you have to return the Observable
return request
.map((res: Response) => res.json())
.catch((error: any) => {
// todo: log?
if (error.status == 500) {
this.alertService.showError(error.statusText);
} else if (error.status == 588) {
this.alertService.showAlert(error.statusText);
}
return Observable.throw(error.statusText);
});
Sometimes when you call catch without using arrow function like below
getUserList() {
return this.http.get(this.constURL + '/api/url/here', this.headerOptions)
.catch(this.handleError);
}
handleError(error: Response) {
if (error.status == 500) {
this.router.navigate(['/login']);
} else {
return Observable.throw(error);
}
}
then it gives error of
ERROR TypeError: Cannot read property 'navigate' of undefined not getting this
Because in handleError function this object is not accessible..if you console this.router then you will get undefined..
so this object not working and not getting router all available methods
So you have to use arrow function here like below
getUserList() {
return this.http.get(this.constURL + '/api/url/here', this.headerOptions)
.catch(error => {
return this.handleError(error);
});
}
handleError(error: Response) {
if (error.status == 500) {
this.router.navigate(['/login']);
} else {
return Observable.throw(error);
}
}
Also if you have not mentioned return for handlerError function then it will throw error again like
Argument of type '(error: any) => void' is not assignable to parameter of type
So its necessary to type return for handlerError function.
Check here for in detail.He has explained code very well with all possible errors and solution of that..worked for me
This is an answer for angular 6 with RXJS 6.
In your request function, it would look similar to this. Note that catch
has been replaced with catchError
and Observable.throw
is now throwError
. Also in RXJS 6 we use pipe to join together a sequence of function we wish to perform instead of the dot chaining previously.
//In your service
getData(url: string): Observable<any> {
let options = this.getHTTPOptions();
return this.http.get<any>(url, options).pipe(
catchError( (err: any, caught: Observable<any>) => { return
throwError(this.generalErrorHandler(err, caught)) } ) );
}
Then you can have an error handler. The key is to specify the keyword return
in both the catchError
function above and return the error in the handler.
The arrow ( =>
) allows you to pass the context of the calling function into the error handler which means you can do cool things such as this.router.navigate(['someroute']);
(If you have the router imported in your service)
//In your service
generalErrorHandler(error: any, caught: Observable<any>): Observable<any> {
console.log('error caught: ', error);
if( error.error.status == "INVALID_TOKEN" || error.error.status == "MAX_TOKEN_ISSUE_REACHED"){
console.log('token has expired');
this.logout();
return error;
}
return error;
}
Some key imports to get this to work:
//Imports for the service
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Http, Response } from '@angular/http';
import { catchError, map } from 'rxjs/operators';
import { Observable, throwError, of} from 'rxjs';
And lastly to subscribe to the request to get your data:
//In your component, don't forget to import your service
let response$ = this.someService.getData('url here');
response$.subscribe(
data => { console.log('do stuff to data here', data); },
err => { console.log("couldn't get data, maybe show error to user"); },
() => { console.log('function that is called upon finish'); }
);