Q:

Angular2 and rxjs 'Catch' Operator not working

Plnkr Link With Working Code
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.

A:

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.

