HttpInterceptorFn ignored in Angular 17

Question

I am trying to learn Angular (17.1.2) and pulling my hair out trying to get HttpInterceptorFn to work. It is getting ignored in my http requests. Can anyone see what I am doing wrong? Thanks in advance.

auth.interceptor.ts

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

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('interceptor ran');
  return next(req);
};

app.config.ts

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

import { routes } from './app.routes';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { authInterceptor } from './interceptors/auth.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes), 
    provideHttpClient(withInterceptors([authInterceptor]))
  ]
};

app.components.ts

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Component, Injector, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    FormsModule,
    HttpClientModule
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'my-app'; 

  http = inject(HttpClient);

  constructor() {
    console.log('app component');

    this.http.get('http//my-api/endpoint').subscribe((res:any) => {
      console.log(res);
    })
  }
  
}

Answer 1

By importing HttpClientModule in your component you're effectively overriding the providers for the HttpClient and its interceptors.

Remove that import and you'll be fine.