Angular 18.0.5拦截器未生效求助（独立组件场景）

函数式拦截器（HttpInterceptorFn）正确配置步骤 #

• 定义拦截器函数，添加调试日志确认触发：

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('函数式拦截器触发:', req.url);
  const modifiedReq = req.clone({
    headers: req.headers.set('Authorization', 'Bearer test-token')
  });
  return next(modifiedReq);
};

• 在app.config.ts中通过provideHttpClient的withInterceptors参数配置：

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { authInterceptor } from './auth.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideHttpClient(withInterceptors([authInterceptor]))
  ]
};

类式拦截器（HttpInterceptor）正确配置步骤 #

• 定义拦截器类，必须添加@Injectable()装饰器：

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    console.log('类式拦截器触发:', req.url);
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer test-token')
    });
    return next.handle(modifiedReq);
  }
}

• 在app.config.ts中启用DI拦截器并注册：

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideHttpClient(withInterceptorsFromDi()),
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
};

关键排查点 #

• 禁止重复配置provideHttpClient：如果在bootstrapApplication或其他地方单独声明provideHttpClient()，会覆盖全局配置，导致拦截器失效。
• 确认请求发起方式：必须使用Angular的HttpClient发起请求，原生fetch或第三方请求库不会触发拦截器。
• 组件级拦截器仅作用于组件树内的HttpClient：如果请求使用的是根注入的HttpClient，组件providers里配置的拦截器不会生效。
• 类式拦截器必须加multi: true：缺少该参数会覆盖默认拦截器数组，导致拦截器无法被识别。
• 避免混用两种配置模式：不要同时使用withInterceptors和withInterceptorsFromDi，防止冲突。

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