The usage of Angular Tap is no longer recommended or supported

My Angular application contains the following HTTP interceptor:

    import { Observable } from 'rxjs';
    import { Injectable } from '@angular/core';
    import { HttpInterceptor, HttpResponse } from '@angular/common/http';
    import { HttpRequest } from '@angular/common/http';
    import { HttpHandler } from '@angular/common/http';
    import { HttpEvent } from '@angular/common/http';
    import { tap } from 'rxjs/operators';
    import { SpinnerService } from '../sharedServices/spinner.service';
    
    @Injectable()
    export class CustomHttpInterceptor implements HttpInterceptor {
    
        constructor(private spinnerService: SpinnerService) { }
    
        intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    
    
            this.spinnerService.show();
            
            return next.handle(req)
                 .pipe(tap((event: HttpEvent<any>) => {
                        if (event instanceof HttpResponse) {
                            this.spinnerService.hide();
                        }
                    }, (error) => {
                        this.spinnerService.hide();
                    }));
        }
    }

Within my code, I have utilized the tap method.

I am encountering a warning that suggests using an observer argument instead of separate callback arguments. The signatures with separate callbacks will be removed in V8.

While the current implementation is functioning correctly, there is a strike mark displayed on the usage of the tap keyword alongside the aforementioned warning message.

Answer №1

Instead of doing it this way:

tap(
  (event: HttpEvent<any>) => {
    if (event instanceof HttpResponse) {
      this.spinnerService.hide();
    }
  }, 
  (error) => {
    this.spinnerService.hide();
  }
)

Try doing it like this instead:

tap({
  next: (event: HttpEvent<any>) => {
    if (event instanceof HttpResponse) {
      this.spinnerService.hide();
    }
  }, 
  error: (error) => {
    this.spinnerService.hide();
  }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I utilize a single component across several pages in Angular for optimal efficiency?

I am currently in the process of developing a website that will have consistent formatting for the 'about us,' services, and contact us sections. The desired format includes: A banner photo A main heading A description Instead of creating sepa ...

Tips for including or excluding a series of comma-delimited values from an input

HTML <div class="wrap_temi"> <ul class="list-inline list-unstyled"> <li class="list-inline-item"> <input type="checkbox" value="amici" autocomplete="off"> Amici </li> <li class="lis ...

Adjustable Title in Line Plot

After receiving a JSON object from a web server in response, I am encountering some challenges with extracting and displaying the data. The JSON array consists of monthly key-value pairs like {"JAN":"17"}, {"FEB":"19"}, {"MAR":"21"}, etc. To display these ...

Choosing and unchoosing columns in an Angular Material table

Feel free to check out this link for more information: Angular PrimeNG Table Order Resize Toggle. It provides guidance on how to select and deselect columns in Angular Mat table. ...

I possess a JSON object retrieved from Drafter, and my sole interest lies in extracting the schema from it

Working with node to utilize drafter for generating a json schema for an application brings about too much unnecessary output from drafter. The generated json is extensive, but I only require a small portion of it. Here is the full output: { "element": ...

Leveraging jQuery to extract numerous concealed data from a webpage based on their names

Here is the scenario: <input type="hidden" name="uID" id="uID" value="251|0"> <input type="hidden" name="uID" id="uID" value="252|0"> <input type="hidden" name="uID" id="uID" value="253|0"> <input type="hidden" name="uID" id="uID" val ...

Could it be that this is a mysterious foreign alphabet or a problem with the encoding?

I'm facing a strange bug with characters on my website and I can't seem to figure out what's causing it. A foreign writer submitted an article to me, and when I received it, the font was displaying oddly. After some investigation, I've ...

Exploring the depths of JSON using @attributes and @association in the realm of JavaScript and AngularJS

Currently, I am working on a project that involves utilizing an API for data retrieval, updates, and deletions. The API in question is the prestashop API. While I have managed to retrieve data and update certain items successfully, I encountered an issue. ...

Using AngularJS to filter an array using the $filter function

Looking for a more elegant way to achieve the following task: myList.forEach(function(element){ if (!['state1', 'state2'].contains(element.state)){ myFilteredList.push(element) } }) I was thinking of using $filter('fi ...

Removing HTML Tags in Ionic - A How-To Guide

After utilizing Ionic 3 to retrieve data from a WordPress API, I am encountering an issue with displaying the content on the app UI. The problem arises from the presence of HTML tags within the content being printed along with the text. While seeking solut ...

Issue arises when attempting to render a component while utilizing window.location.pathname and window.location.hash in conjunction with a navigation bar

I am encountering a problem when attempting to render a react component using a navigation bar. I have experimented with both Switch case and if-statement methods. The first approach involves using window.location.hash, which successfully alters the URL u ...

What is the method for storing elements in localStorage within a ReactJs application?

Currently, I am working on learning react-redux and coding a new project. My goal is to implement a feature where clicking the Add Favorites button will push all column data to local storage. Despite reading numerous articles, none of them have provided ...

The element will only show up upon resizing (in Safari web browser)

I am facing a problem with a button styled using the class btn-getInfo-Ok <button class="btn-getInfo-Ok">Hello</button> in my style.css file .btn-getInfo-Ok { color:white !important; margin: 0 auto !important; height:50px; bottom:0; ...

Retrieve the XML document and substitute any occurrences of ampersands "&" with the word "and" within it

The XML file is not being read by the browser due to the presence of ampersands represented as "&". To resolve this, I am looking to retrieve the XML file and replace all instances of "&" with "and". Is this achievable? Despite attempting to use t ...

What are the steps to implement background synchronization in place of making fetch requests upon UI changes?

Consider this scenario: A straightforward web application with a comments feature. In my view, when a user submits a comment, the following steps would typically unfold: Show UI loader; Update the front-end state; Send a fetch request to the API to post ...

NodeJS npm module installed globally is unable to run the main/bin JavaScript file using node command

Here is an example of my package.json: { "name": "example-module", "version": "1.0.0", "bin": "./bin/example-module.js", "main": "./bin/example-module.js", "description": "Example module description", "homepage": "http://my.home.page.com", " ...

The error message 'ReferenceError client is not defined' is indicating that the

I'm currently attempting to retrieve the id of clients connecting to my socket.io/node.js server by following the method outlined in the top response on how to get session id of socket.io client in Client. However, I am encountering an error message: ...

Carousel with Bootstrap: Heading positioned over the content

My goal is to have the caption of Bootstrap Carousel displayed above the content, but I'm encountering issues with it. When clicking on the chevrons, you may notice the < Item 1 > bouncing... (This behavior is a bug, and logically speaking, I ex ...

Navigating between different views and pages within Angular FullCalendar can be achieved by utilizing the appropriate handlers for next,

After successfully integrating Angular fullCalendar into my Angular project and displaying events that I can click on, I found myself stuck when trying to handle clicks on the next and prev buttons as well as view changes. Unfortunately, the official docum ...

"Learn the technique of adding a new data attribute before every element in a step-by-step

I am currently working with the following HTML code: <div id="elem"> <div data-foo="aaa"></div> <div data-foo="aaa"></div> <div data-foo="aaa"></div> <div data-foo="bbb"></div> < ...