Error: Cannot read properties of undefined (reading 'pipe') Angular12

Question

I am getting below error while sending ajax request,

ERROR TypeError: Cannot read properties of undefined (reading 'pipe')

ajax-loader.interceptor.ts class

 export class AjaxLoaderInterceptor implements HttpInterceptor {
 private loaderProp = 'ajax_loader';
 constructor(private activeAjaxLoadersService: ActiveAjaxLoadersService) {}

 intercept(
   request: HttpRequest<any>,
   httpHandler: HttpHandler
 ): Observable<HttpEvent<any>> {
   console.log('ajax loader', request);
   const loaderName = request.headers.has(this.loaderProp)
     ? request.headers.get(this.loaderProp)
     : null;
   console.log('loaderName', loaderName);
   const updatedHeaders = request.headers.has(this.loaderProp)
     ? request.headers.delete(this.loaderProp)
     : request.headers;
   const updatedRequest = request.clone({ headers: updatedHeaders });
   console.log('updatedHeaders', updatedHeaders, updatedRequest);
   this.updateLoaderState(loaderName, XHR_REQUEST_STATES.PROGRESS);

   return httpHandler.handle(updatedRequest).pipe(
     tap((event: HttpEvent<any>) => {
       console.log('httpHandler', event);
       if (event instanceof HttpResponse) {
         this.updateLoaderState(loaderName, 'success', event);
       }
     }),
     (responseError: any): any => {
       if (responseError instanceof HttpErrorResponse) {
       }
     }
   );
 }

Providers code:

providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AjaxLoaderInterceptor ,
      multi: true
    }
  ]

Same code was working in angular 8 but after upgrade to v12 it broke.

I have created reproducible code example in stackblitz , Please find it here Example

Any help would be appreciated. Thanks!

Answer 1

In your ajax-loader.interceptor.ts file add return statement after if condition like this below

   if (responseError instanceof HttpErrorResponse) {
       }

    return responseError;