Angular 2 http catch observable issue

Question

I have a custom http service which overrides default angular 2 http service. This service sets custom default options and set loader on request start and hides loader on request completion.

I also want to add, the functionality to redirect user to the login page in case if Unauthorized error (401, 403) is received from server. For example below is my http method

get(url: string, options?: RequestOptionsArgs): Observable<any> {
        this.setLoadingStatus();
        options = this.prepareOptions(options);
        let that = this;
        return super.get(url, options)
            .map(res => {
                this.clearLoadingStatus();
                return res.json();
            })
            .catch(function (err) {
                //redirects user to login and display alert
                that._gs.alertUnauthorized();
                return Observable.empty();
            });
    }

But when test it in browser i.e. make a request for protected page that returns 401 in case of unauthorized request, it doest redirect to the login page but console displays below error:

GET http://localhost:49547/api/protected/ 401 (Unauthorized)
EXCEPTION: Observable_1.Observable.empty is not a function
ORIGINAL STACKTRACE:
TypeError: Observable_1.Observable.empty is not a function

Can anyone please guide?

Try super.get().map((res) => {}, (err) => {}); syntax?

Harry Ninh
– Harry Ninh

2016-10-01 10:29:19 +00:00
Commented Oct 1, 2016 at 10:29 — Harry Ninh
– Harry Ninh, Commented Oct 1, 2016 at 10:29

j2L4e · Accepted Answer · 2016-10-01 20:24:59Z

2

You need to import the empty function:

import 'rxjs/add/observable/empty'

answered Oct 1, 2016 at 20:24

j2L4e

7,0581 gold badge36 silver badges40 bronze badges

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

4 Comments

Naveed Ahmed Over a year ago

Thank you, this was helpful. Please also guide that if using Observable.empty() in this case is appropriate, or is there any other better option?

Naveed Ahmed Over a year ago

I still see the below error line printed in console "zone.js:1274 GET localhost:49547/proteccted 401 (Unauthorized)", is it okay? or is it an exception that needs to be handled?

j2L4e Over a year ago

I think it's just a debugging thing. Returning Observable.empty() supresses the error, so if that's what you want, you're golden.

Naveed Ahmed Over a year ago

When server returns 401 unauthorized, I want to redirect to Login page.

Collectives™ on Stack Overflow

Angular 2 http catch observable issue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related