Angular 17中HttpInterceptorFn被忽略，请求排查问题

你的拦截器完全被忽略的核心问题是独立组件中同时使用了HttpClientModule和provideHttpClient配置拦截器，这会生成两个互不关联的HttpClient实例：拦截器仅对provideHttpClient提供的实例生效，但组件注入的是HttpClientModule创建的实例，导致拦截器根本不会触发。

具体修复步骤 #

1. 移除组件中的HttpClientModule导入 #

在app.component.ts的imports数组里删除HttpClientModule，因为app.config.ts中已经通过provideHttpClient(withInterceptors(...))提供了带有拦截器的HttpClient，无需再导入模块。

修改后的app.component.ts代码：

import { HttpClient } from '@angular/common/http';
import { Component, 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');

    // 修复URL拼写错误：补充冒号，改为 http://
    this.http.get('http://my-api/endpoint').subscribe((res:any) => {
      console.log(res);
    })
  }
  
}

2. 修复HTTP请求URL的拼写错误 #

你代码中的请求URL是http//my-api/endpoint，缺少了冒号，正确格式应为http://my-api/endpoint，这个错误会直接导致请求失败，建议一并修正。

验证修复 #

修改完成后重启应用，发起HTTP请求时，控制台会打印出interceptor ran，说明拦截器已正常生效。

内容的提问来源于stack exchange，提问作者Ashley Finlayson