Interceptor not intercepting http requests (Angular 6)

angular 8 http interceptor not working
angular http interceptor response headers
interceptor not working for lazy loaded module
angular conditional interceptor
error interceptor angular 8
angular intercept http post
angular jwt interceptor not working
angular cli command to generate interceptor

I'm in the proces of adding an interceptor to my angular 6 project. To make calls to my API, I need to add a bearer token to all calls. Unfortunately the interceptor does not seem to be called. My code:

import { Injectable } from "@angular/core";
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
import { Observable } from "rxjs";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

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

        //Retrieve accesstoken from local storage
        const accessToken = localStorage.getItem("access_token");

        //Check if accesToken exists, else send request without bearer token
        if (accessToken) {
            const cloned = req.clone({
                headers: req.headers.set("Authorization",
                    "Bearer " + accessToken)
            });

            console.log('Token added to HTTP request');

            return next.handle(cloned);
        }
        else {
            //No token; proceed request without bearer token
            console.log('No token added to HTTP request');
            return next.handle(req);
        }
    }
}

Does anyone know what could be causing this issue? Thanks in advance.


You use the right way to intercept.

For people who use interceptor, you need to do 2 modifications :

Interceptor in service

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse }
  from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';

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

    return next.handle(req).do(evt => {
      if (evt instanceof HttpResponse) {
        console.log('---> status:', evt.status);
        console.log('---> filter:', req.params.get('filter'));
      }
    });

  }
}

Provide HTTP_INTERCEPTOR

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
(...)
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }
  ],

Read this article for more details. It's pretty good

Http interceptor not working · Issue #1050 · ngx-translate/core · GitHub, Hey, i dont know if iam doing something wrong but i cant get my http interceptor to work. Pull requests 6 when requesting the translation files it will through the interceptor but for my other http request i doesnt. Interceptor Code: import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor,  Tutorial about Angular 6 and 7 interceptor to handle the HTTP client request, response and error handling


In my case interceptor wasn't getting involved for service calls because I had imported HttpClientModule multiple times, for different modules.

Later I found that HttpClientModule must be imported only once. Doc ref

Hope this helps!

How To Use Angular Interceptors to Manage HTTP Requests and , Angular 6 & 7 HTTP Client Interceptor with Error handling. You also need to know a intercept(request: HttpRequest<any>, next: HttpHandler):  When a request is sent the function intercept is called and the authorization header is correclty set with the token value in the variable "request" as you can see there : token console screenshot. But the authorization header doesn't appear in the request sent by my browser : network request headers and the backend cannot resolve the token.


If you have a providers array for a module then you have to define the HTTP_INTERCEPTORS too for that module then only it will intercept the requests under that module.

e.g:

providers: [ 
// singleton services
PasswordVerifyService,
{ provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptorService, multi: true }
]

Angular: When HttpInterceptor doesn't work with lazy loaded modules, An HttpInterceptor provides a standard way to intercept HTTP requests and sure that no other module imports HttpClientModule in your application once  Not only did it bring optimizations in how we can execute requests to backend APIs, but it made intercepting HTTP requests extremely easy. Contents are based on Angular version >= 4.3.1 Learn everything about the new Http client introduced in Angular 4.3 and now default in Angular 5 in my latest Egghead.io video course on “Learn HTTP in


Top 10 ways to use Interceptors in Angular, This article is not about teaching interceptors as there are already so many It provides a way to intercept HTTP requests and responses to transform or 6. Notifications. Here we have many different cases where we could show messages. Let’s see how to create a basic interceptor that will intercept all HTTP requests. In order for that interceptor to be called, it has to be added to the list of all… Angular Training


Interceptor not intercepting http requests (Angular 6), Interceptor not intercepting http requests (Angular 6) - angular. My code: import { Injectable } from "#angular/core"; import { HttpInterceptor, HttpRequest,  The Angular HTTP Interceptor is introduced along with the new HTTPClientModule. The Interceptor helps us to modify the HTTP Request by intercepting it before the Request is sent to the back end. The Interceptor helps us to modify the HTTP Request by intercepting it before the Request is sent to the back end.


Interceptor not intercepting http POST requests (Angular 6), I have created an angular interceptor implementing the httpinterceptor. It is working fine for the http GET requests. But failing for POST requests. My interceptor  The HttpClientModule, which debuted in Angular 4.3, is an easy to use API.It automatically expects json as its default response type, builds in the ability to intercept both requests and responses, and makes testing a breeze.