Managing HTTP Requests and Error Handling with Angular Interceptors featured image

Managing HTTP Requests and Error Handling with Angular Interceptors

If you have been developing an application using AngularJS, you are probably aware of HTTP interceptors. However, these HTTP interceptors were not available in Angular until version 4.3. In this tutorial, we will be using interceptors in Angular to handle HTTP requests and responses, and process errors.


Angular applications use Node.js runtime. To complete this tutorial, you will need to have Node.js installed on your machine. Fortunately, Node.js is quite easy to install. We have a complete guide on How to Install Node.js on Ubuntu 18.04 here.

In addition, it will be beneficial for you to know Angular and to be familiar with using Angular CLI to build Angular applications. We will be using Node v8.12.0 and npm v6.4.1.

Step 1: Create Angular App

To begin with, let’s create a new Angular app using Angular CLI. We will name our application Angular-Interceptor. Run the command below to create the app:

You will be asked for some choices. Enter the default values and go ahead:

ang cli Angular Interceptors

Next, navigate to the application directory, and run the below command to start the application:

ng serve Angular Interceptors

Then, view http://localhost:4200 in your browser to see the app. You’ve now configured a basic Angular app.

Step 2: Style Angular App

Here we will be styling our Angular app using Angular Material. To install Angular Material in your project, run the below command:

This will install @angular/material, @angular/cdk, and @angular/animation in your project. Next, we will set up an animation in the project. Add BrowserAnimationsModule in your src/app/module.ts file:

We will be using the Dialog component from Angular Material. To use the Dialog component, we have to import MatDialogModule in the src/app/app.module.ts file:

To make the UI more attractive, let’s add indigo-pink.css to your styles.scss file:

Step 3: Build Your Angular Interceptor

Under the app folder, we will create a new folder called interceptor. Inside this newly created folder, create a new httpconfig.interceptor.ts file.

We need to import some dependencies in our httpconfig.interceptor.ts to make our interceptor work. These dependencies are HttpInterceptor, HttpRequest, HttpResponse, and HttpHandler, HttpEvent, HttpErrorResponse.

Our httpconfig.interceptor.ts file will look like below after import:

Next, create a class HttpConfigInterceptor and implement the interface HttpInterceptor. This is an example:

Add the below code to the httpconfig.interceptor.ts file:

To make it work, we need to import httpconfig.interceptor.ts in our app.module.ts file:

Add HttpConfigInterceptor to providers. We will set multi: true to handle multiple interceptors:

In the next section, we shall create our service to handle errors.

Step 4: Service for Handling Errors

Here we will be writing code to handle errors. We will need to capture the errors and appropriately display them to the end users. In a nutshell, below are the steps we will be following:

  1. Create a folder called error-dialog in the app folder.
  2. Create a service for errors called errorDialogService in a file called errordialog.service.ts.
  3. Add the below code in the errordialog.service.ts :
After that, create a new file called errordialog.component.ts. Inside this file add the below code:
Finally, we need to create a HTML file, errordialog.component.html, for the template:
We need to revisit httpconfig.interceptor.ts file for some changes. These changes will allow us to intercept errors.

To summarize, let’s list the steps below:

  1. Start with importing errordialog.service.
  2. Then, we will add the constructor for errorDialogService.
  3. We will also add the code to handle the error response using catchError and throwError.
  4. Import errordialog.service and errordialog.component into the AppModule.

After we have done the changes, two files will be modified: app.module.ts and httpconfig.interceptor.ts:

Step 5: Creating Sample Services

In this step we will create two services as a sample:

  1. Login API
  2. Customer Detail API

Create a new folder called services in the src folder. Next, inside this newly created folder, create a new file called login.service.ts, and add two functions:

Step 6: Calling the HTTP Client Service

Finally, we are at the last part of our tutorial. We shall be calling our HTTP service from the app.component.ts file. Add the two LoginService functions to app.component.ts. Call login API with onload and the customers/details with onclick:

Now we have to add a UI element in app.component.html, so that the user can click it:

To finish, you will need to include the LoginService to providers in AppModule:

Below, find a screenshot of the error handler dialog:



In this tutorial, we learned how to handle HTTP requests and responses using Angular interceptors. We also learned how to handle errors using dialog in Angular Material.

Angular apps use Node.js as their runtime. If you want to learn more about Node.js and how to deploy Node.js applications on Docker, check out our How to Deploy a Node.js (Express.js) App with Docker on Ubuntu 20.04 guide. You can also check out How To Perform Production Tasks On Ubuntu 20.04 With Node.js and Installing Node.js on CentOS 8: a Complete Guide.

Happy Computing!