Angular2 and rxjs 'Catch' Operator not working

Question

I am trying to copy the working code from Plnkr to my machine and it's showing error in the VisualStudio.

Currently I am using @angular "^2.4.5" and rxjs "^5.2.0"

The error is saying that

Argument of type '(error: any) => void' is not assignable to parameter of type '(err: any, caught: Observable) => ObservableInput<{}>'.

You can see in my following script that I copied exactly similar to the Plnkr code and imported 'catch' operator. However, it's not working and showing the above error in getStudentCourse2() method.

If I removed catch operator and changed the code like the one in getStudentCourse() method, it works and I can see the result.

student.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/of';

@Injectable()
export class StudentService {
    private http: Http;            

    constructor(http: Http) {
        this.http = http;        
    }

    getStudentCourse(): Observable<IStudentCourse> {

        return this.http.get('/api/student/getstudentcourse').map(result => {
            return result.json() as IStudentCourse;
        }, error => console.log('Could not load data in service.'));

    }

    getStudentCourse2(): Observable<IStudentCourse> {

        return this.http.get('https://58cff77fe1a0d412002e446d.mockapi.io/api/student/getstudentcourse/2').map(result => {
            return result.json() as IStudentCourse;
        }).catch(error => console.log('Could not load data in service.'));

    }
}

export interface IStudentCourse {
    refNo: string;
    student: string;
    offeringName: string;
    offeringID: number;
}

I couldn't find out why 'Catch' operator is not working in my code like 'Plnkr'. Could you guys please help me with this issue? Thanks.

you can an Observable object in catch operator.For example see the below code : return this.http.get('58cff77fe1a0d412002e446d.mockapi.io/api/student/… => { return result.json() as IStudentCourse; }).catch(error => Observable.throw('Could not load data in service.')); — Venkateswaran R
– Venkateswaran R, Commented Mar 21, 2017 at 9:35

cyr_x · Accepted Answer · 2017-03-21 09:47:22Z

2

The catch operator needs to return an Observable but you are returning void due to console.log is always returning void. Return an Observable and the error will go away.

For example:

...
.catch(error => {
  console.log('something went wrong');
  return Observable.throw(new Error('throw a fancy new error'));
})

answered Mar 21, 2017 at 9:47

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ulubeyn · Accepted Answer · 2017-03-21 09:48:16Z

2

The error is saying this; callback in catch operator does not return anything. You can throw error in catch operator and handle this error when you subscribe;

getStudentCourse(){
     return this.http.get(parameters).map(handleData).catch(error => {
          Observable.throw(error);
     });
}

getStudentCourse().subscribe(successCallback, (error) => {
     // do whatever you want with this error
});

answered Mar 21, 2017 at 9:48

ulubeyn

3,0821 gold badge22 silver badges29 bronze badges

Comments

Robin Dijkhof · Accepted Answer · 2017-03-21 09:51:46Z

2

The catch needs to return an Observable or throw something. When you return an observable it will enter the success method in your subscribe. When you throw something it will enter your error method. Check the answer I gave to your previous question. this plunker

answered Mar 21, 2017 at 9:51

Robin Dijkhof

19.3k14 gold badges72 silver badges127 bronze badges

Comments

Kerim Emurla · Accepted Answer · 2017-03-21 09:57:26Z

Your problem comes from the fact that the catch method must return an Observable, but your code doesn't really return an Observable.

You can easily fix the issue with the following code:

return this.http.get('https://58cff77fe1a0d412002e446d.mockapi.io/api/student/getstudentcourse/2').map(result => {
            return result.json() as IStudentCourse;
        }).catch(error => Observable.throw(error));

However, I would suggest an another pattern for this problem that would actually make your code a bit cleaner in my opinion.

Instead of using .catch method you can just easily create an ExceptionService(for example) with a HandlException method and just pass the error to that method and handle the error there.

Your code would look something like this:

return this.http.get('https://58cff77fe1a0d412002e446d.mockapi.io/api/student/getstudentcourse/2').map(result => {
                return result.json() as IStudentCourse;
            },
            error => this._exceptionService.HandleError(error));
)

(Having said that you injected the _exceptionService in your component)

By doing the handling this way, your code becomes cleaner.

Collectives™ on Stack Overflow

Angular2 and rxjs 'Catch' Operator not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related