Encountering a TypeError with Angular 5 Interceptor: The do function is not recognized when using next.handle(...)

Question

Encountering a TypeError with Angular 5 Interceptor: The do function is not recognized when using next.handle(...)

While developing an angular interceptor to verify the validity of my auth tokens, I encountered an issue where the do method is not recognized by angular. The alternative solution involving subscribe was effective, but it led to duplicate requests being sent to the server.

TypeError: next.handle(...).do is not a function
at AuthTokenService.webpackJsonp.../../../../../src/app/commons/services/interceptors/auth-token.service.ts.AuthTokenService.intercept (auth-token.service.ts:37)
at HttpInterceptorHandler.webpackJsonp.../../../common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1796)
at XsrfService.webpackJsonp.../../../../../src/app/commons/services/interceptors/xsrf.service.ts.XsrfService.intercept (xsrf.service.ts:15)
at HttpInterceptorHandler.webpackJsonp.../../../common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1796)
at HttpXsrfInterceptor.webpackJsonp.../../../common/esm5/http.js.HttpXsrfInterceptor.intercept (http.js:2489)
at HttpInterceptorHandler.webpackJsonp.../../../common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1796)
at MergeMapSubscriber.project (http.js:1466)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:128)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:118)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber.next (Subscriber.js:92)

Take a look at my interceptor code below:

import { Injectable, NgModule} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from 
'@angular/common/http';
import { SessionService } from 'app/commons/services/auth/session.service';
import { HttpErrorResponse } from "@angular/common/http";
import { StateService } from '@uirouter/angular';

import 'rxjs/add/operator/do';

import * as _ from "lodash";

@Injectable()
export class AuthTokenService implements HttpInterceptor {
  constructor(
    private sessionService: SessionService,
    private stateService: StateService
  ) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const currUser = this.sessionService.getCurrentUser();
    const authToken = _.get(currUser, ['auth_token'], null);

    let dupReq = req.clone({ headers: req.headers.set('Authorization', '') });

    if (!_.isNil(authToken)) {
      dupReq = req.clone({ headers: req.headers.set('Authorization', `Token ${authToken}`) });
    }

    return next.handle(dupReq)
      .do(ev => {
        console.log(event);
      })
  }
};

Although I have followed all the necessary steps, the do side-effect mentioned in the guide does not seem to be working as expected.

typescript angular5 angular-http-interceptors

Answer 1

Answer №1

Realized my error in Angular 5 with the switch to lettable operators. Still wrapping my head around their functionality since I'm a beginner with this technology. After hours of frustration trying to understand interceptors by referring to Angular 4 resources, I stumbled upon a helpful article: Angular 5: Upgrading & Summary of New Features

Here is my updated code:

import { map, filter, tap } from 'rxjs/operators';

@Injectable()
export class AuthTokenService implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const started = Date.now();
        return next.handle(dupReq).pipe(
        tap(event => {
          if (event instanceof HttpResponse) {
            
console.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
          }
        }, error => {
          console.error('NICE ERROR', error)
        })
      )
    }
}

This code flawlessly handles errors from my http requests.

Answer 2

Realized my error in Angular 5 with the switch to lettable operators. Still wrapping my head around their functionality since I'm a beginner with this technology. After hours of frustration trying to understand interceptors by referring to Angular 4 resources, I stumbled upon a helpful article: Angular 5: Upgrading & Summary of New Features

Here is my updated code:

import { map, filter, tap } from 'rxjs/operators';

@Injectable()
export class AuthTokenService implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const started = Date.now();
        return next.handle(dupReq).pipe(
        tap(event => {
          if (event instanceof HttpResponse) {
            
console.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
          }
        }, error => {
          console.error('NICE ERROR', error)
        })
      )
    }
}

This code flawlessly handles errors from my http requests.

Encountering a TypeError with Angular 5 Interceptor: The do function is not recognized when using next.handle(...)

Answer №1

Similar questions

Flashing Screens with Ionic 2

Select multiple rows by checking the checkboxes and select a single row by clicking on it in the MUI DataGrid

Testing the creation of elements dynamically with jestLooking into jest for dynamically adding

React's memo and/or useCallback functions are not functioning as anticipated

What steps can I take to troubleshoot and repair my accordion feature within an Angular project?

What could be causing the errors in my subscription function?

Leverage TypeScript to restrict the payload type based on the action name

Attempting to utilize Array Methods with an Array Union Type

Removing/modifying selected choices in an element

Unable to retrieve template generated using the innerHTML directive in Angular 4

Guide for implementing props in a text area component using React and TypeScript

Frequent occurrence when a variable is utilized prior to being assigned

How to pass a single property as a prop in TypeScript when working with React

Detecting the language of a browser

Tips for displaying a hyperlink in an Angular 6 component template

The TypeScript error message states that the element type 'Modal.Header' specified in the JSX does not contain any construct or call signatures

Errors abound in Angular's implementation of custom reactive form validators

The bundling of Angular 2 and RxJS is not happening in Typescript

Error: The function createImageUrlBuilder from next_sanity__WEBPACK_IMPORTED_MODULE_0__ is not defined as a valid function

Ways to access the parent value within a child component in Angular 4