Angular 5 HTTP拦截器循环依赖问题求助

别慌！刚上手Angular遇到这种问题太正常了，我来一步步帮你搞定这个Cannot instantiate cyclic dependency! InjectionToken_HTTP_INTERCEPTORS的报错。

报错原因分析 #

这个错误本质是循环依赖链：Angular初始化HttpClient的时候会加载所有HTTP拦截器，如果你在拦截器的构造函数里直接注入了某个依赖HttpClient的服务（比如你自己写的API请求服务），就会形成死循环——拦截器需要你的服务，你的服务需要HttpClient，HttpClient又需要拦截器，系统就卡壳了。

具体解决方案 #

方案1：用Injector延迟获取依赖（最常用的解决办法） #

不要在拦截器的构造函数里直接注入依赖的服务，而是通过Injector手动在需要使用的时候获取，打破初始化阶段的循环。

示例代码如下：

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
// 假设你依赖的服务是这个
import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  // 先声明服务变量，不在构造函数里直接注入
  private authService: AuthService;

  // 只注入Injector
  constructor(private injector: Injector) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 在intercept方法里才获取服务，避免初始化时的循环
    if (!this.authService) {
      this.authService = this.injector.get(AuthService);
    }

    // 接下来就可以正常使用服务了，比如获取token
    const authToken = this.authService.getAuthToken();
    // 克隆请求并添加请求头
    const modifiedRequest = req.clone({
      setHeaders: {
        Authorization: `Bearer ${authToken}`
      }
    });

    return next.handle(modifiedRequest);
  }
}

方案2：检查拦截器的模块注册是否正确 #

确保你在AppModule里的拦截器配置是正确的，必须加上multi: true（表示允许多个拦截器并存）：

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // 这个属性一定要加，否则会覆盖默认拦截器导致报错
    }
  ]
})
export class AppModule {}

额外提醒 #

如果你的拦截器本身需要调用HTTP请求，绝对不要直接在构造函数里注入HttpClient，同样用上面的Injector延迟获取，避免触发循环依赖。

内容的提问来源于stack exchange，提问作者R. Mora