Angular全局拦截器报错：Interceptor.intercept 不是函数

阿华AIGC实验室

2026-5-28

解决Angular拦截器TypeError: this.interceptor.intercept is not a function问题

看起来你遇到的这个问题，大概率是拦截器的实现或配置环节出了疏漏——毕竟根组件能用、子组件报错，说明拦截器的实例化或注入逻辑在不同组件上下文里有差异。下面是几个最可能的排查方向，你可以逐一验证：

1. 确认拦截器类正确实现了`HttpInterceptor`接口

这是最容易踩的坑：如果你的拦截器类没有明确实现HttpInterceptor，或者intercept方法的签名写错了（比如拼写错误、参数/返回值类型不对），就会触发这个错误。

正确的实现模板应该是这样的：

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

@Injectable()
export class CustomInterceptor implements HttpInterceptor {
  // 必须保证方法名是intercept，参数和返回值类型完全匹配
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 你的拦截逻辑代码
    return next.handle(req);
  }
}

注意：一定要加上implements HttpInterceptor，Angular的类型检查能帮你避免很多低级错误。

2. 检查拦截器的全局提供配置是否正确

拦截器需要通过HTTP_INTERCEPTORS令牌全局提供，而且必须满足两个关键条件：

使用useClass指定拦截器类（不要用useValue）
添加multi: true（允许多个拦截器共存）

正确的模块配置示例（通常在AppModule或核心单例模块中）：

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { CustomInterceptor } from './path-to-your-interceptor/custom.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CustomInterceptor,
      multi: true // 这个属性绝对不能少！
    }
  ]
})
export class AppModule {}

如果你的子组件属于懒加载模块，不要在懒加载模块中重复提供HTTP_INTERCEPTORS——这会创建拦截器的新实例，很可能导致上下文冲突。

3. 验证子组件/服务的`HttpClient`注入逻辑

确保子组件和对应的服务中，注入的是@angular/common/http中的HttpClient，而不是旧的Http模块（Angular 4+已经废弃了旧模块）。
检查子组件所在的模块是否已经导入了HttpClientModule？不过如果根组件能正常使用，通常根模块已经导入了，但懒加载模块如果没导入的话也可能有问题（更推荐在根模块统一导入HttpClientModule，避免重复）。