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, Aug 23 '17 at 18:59

score 53 · Accepted Answer · edited Sep 07 '17 at 01:15

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 07 '17 at 01:15

Chic

9,836
4
33
62

answered Aug 24 '17 at 10:00

user8510992

546
5
2

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) – ganders Feb 12 '18 at 16:30
This is not valid anymore as of Angular 6. Lettable operators are to be used. – Jago Oct 26 '18 at 11:33
Saved the day.!! <3 – Adarsh Mohan Jul 21 '22 at 18:30

score 25 · Answer 2 · answered Jul 02 '18 at 15:35

25

rxjs 6 / angular 6 will need the pipe

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

answered Jul 02 '18 at 15:35

Shawn Palmer

321
3
5

score 8 · Answer 3 · answered Sep 09 '17 at 08:35

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 09 '17 at 08:35

Hebert Godoy

106
1
1

Same as for other answer; this is not valid anymore as of Angular 6, because lettable operators are to be used. – Jago Oct 26 '18 at 11:33
:) This question was answered a while ago, sure rxjs has changed a lot since then, but surely you know that @Jago – Hebert Godoy Oct 27 '18 at 15:51

score -1 · Answer 4 · edited Dec 12 '17 at 15:05

-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 '17 at 15:05

Petter Friberg

21,252
9
60
109

answered Aug 25 '17 at 14:12

Multitut

2,089
7
39
63

3

Subscribe will duplicate request. – NagRock Apr 24 '18 at 07:12

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

4 Answers4