HTTP Interceptor not Triggering on HTTP Calls in Angular 17

Question

I'm currently facing an issue with an HTTP interceptor in my Angular application. I've created an interceptor to add an authentication token to the headers of HTTP requests, but it doesn't seem to be triggering during HTTP calls.

Here is the code for my interceptor:

import { HttpInterceptorFn } from '@angular/common/http';

export const TokenInterceptor: HttpInterceptorFn = (req, next) => {
  
    if (req.headers.get('No-Auth') == 'True') {
    return next(req);
  }

  if (typeof window !== 'undefined') {
    const authToken = localStorage.getItem('authToken');

    if (!authToken) {
      //TODO redirection vers la page d'authentification
    }

    const authReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${authToken}`,
      },
    });

    return next(authReq);
  }
  return next(req);
}

I've properly registered the interceptor in my Angular module, but it doesn't seem to be triggering during HTTP calls. Do you have any ideas on what might be causing this issue, especially considering I'm using Angular 17? Did I miss anything in the configuration of the interceptor?

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { TokenInterceptor } from '../domain/services/interceptor-token.service'; 

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes, withComponentInputBinding()), provideClientHydration(), provideHttpClient(withInterceptors([
    TokenInterceptor
  ]))]
}

Any help would be greatly appreciated. Thanks in advance!

What did you try: I implemented an HTTP interceptor in Angular 17 to add an authentication token to the headers of HTTP requests. I registered the interceptor in my Angular module, and I ensured that it's included in the providers list.

What were you expecting: I expected the interceptor to be triggered during HTTP calls, adding the authentication token to the headers as intended. The goal is to secure my HTTP requests with the authentication token retrieved from localStorage.

Observations/Issues: Despite proper registration, the interceptor doesn't seem to be triggering during HTTP calls. I've verified that the No-Auth header is not present when it should trigger, and I'm using Angular version 17.

Question to the Community: Any insights into what might be causing this issue? Did I miss any Angular 17-specific configurations or considerations for HTTP interceptors?

Additional Information:

Angular Version: 17 Code Snippet: Include the relevant parts of your interceptor implementation and module registration.

Answer 1

I recently faced the same problem as you. I've noticed that I was importing the "HttpClientModule" in my LoginComponent, after I removed it from the imports the problem was solved.