Angular 4 Http Interceptor: next.handle(...).do is not a function

Question

I created this HTTPInterceptor to be able to better handle http errors, it was working well before I did a git pull and ran npm install.

This is my code:

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse} from '@angular/common/http';
import {Observable} from "rxjs";
import {ToasterService} from "angular2-toaster";

@Injectable()
export class GobaeInterceptor implements HttpInterceptor {
    constructor(private toasterService: ToasterService){
    }
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req)
            .do(event => {
                if (event instanceof HttpResponse) {
                    let response = event.body;
                    if(response.Error){
                        this.toasterService.pop('error', 'Error '+response.Code, response.Message);
                    }
                }
            });
    }
}

And this is the error I get:

TypeError: next.handle(...).do is not a function at GobaeInterceptor.webpackJsonp.../../../../../src/app/services/gobae.interceptor.ts.GobaeInterceptor.intercept (gobae.interceptor.ts:12) at HttpInterceptorHandler.webpackJsonp.../../../common/@angular/common/http.es5.js.HttpInterceptorHandler.handle (

Did something that can affect my code changed lately? what can I do now to "catch" the http response on my interceptor?

heck if the provider for the interceptor is still there , better just do a compare of the code before and after pull or what files where changed after pull . as i guess the module providers is missing . or even the httpclientmodule — Rahul Singh
– Rahul Singh, Commented Aug 23, 2017 at 18:59

Chic · Accepted Answer · 2017-09-07 01:15:39Z

53

This error is thrown because you are missing the do operator. The below import with patch the observable object with the do operator.

import 'rxjs/add/operator/do';

RxJs does not come bundled with all the operator functions by default to reduce the library size. You are required to import the operators you would like to use individually.

edited Sep 7, 2017 at 1:15

Chic

10.7k5 gold badges36 silver badges63 bronze badges

answered Aug 24, 2017 at 10:00

user8510992

5465 silver badges2 bronze badges

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

3 Comments

ganders Over a year ago

I'm getting this, and I already have that in my interceptor file. Does this then need to be added to any unit test that does an http call? (aka EVERY unit test that does a get/post/put/delete/etc)

Jago Over a year ago

This is not valid anymore as of Angular 6. Lettable operators are to be used.

Adarsh Mohan Over a year ago

Saved the day.!! <3

Shawn Palmer · Accepted Answer · 2018-07-02 15:35:03Z

26

rxjs 6 / angular 6 will need the pipe

return next.handle(req).pipe(
  tap(event => {
    if (event instanceof HttpResponse) {
      ...
    }
  })
);

answered Jul 2, 2018 at 15:35

Shawn Palmer

3613 silver badges5 bronze badges

Comments

Hebert Godoy · Accepted Answer · 2017-09-09 08:35:04Z

8

You have to use import.

import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/Observable';
import 'rxjs/add/observable/throw';

answered Sep 9, 2017 at 8:35

Hebert Godoy

1061 silver badge1 bronze badge

2 Comments

Jago Over a year ago

Same as for other answer; this is not valid anymore as of Angular 6, because lettable operators are to be used.

Hebert Godoy Over a year ago

:) This question was answered a while ago, sure rxjs has changed a lot since then, but surely you know that @Jago

Petter Friberg · Accepted Answer · 2017-12-12 15:05:48Z

-1

I ended up changing the operator from this:

next.handle(req).do

To this:

next.handle(req).subscribe

It seems that:

Operators from rxjs are not loaded by default anymore
Since Angular has implemented observables on HTTP calls, subscribe is the right one to go

edited Dec 12, 2017 at 15:05

Petter Friberg

21.8k10 gold badges67 silver badges116 bronze badges

answered Aug 25, 2017 at 14:12

Multitut

2,1898 gold badges40 silver badges67 bronze badges

1 Comment

NagRock Over a year ago

Subscribe will duplicate request.

Collectives™ on Stack Overflow

Angular 4 Http Interceptor: next.handle(...).do is not a function

4 Answers 4

3 Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related