HttpInterceptor注入服务未初始化及params.map报错问题排查

这问题我之前也遇到过，核心是Angular拦截器的依赖注入配置逻辑和普通组件/服务不一样，咱们一步步来解决：

为什么会出现loginLoadingService未定义？ #

拦截器是通过HTTP_INTERCEPTORS令牌注册的多提供者，如果直接用useClass配置，Angular没办法正确解析拦截器构造函数里的依赖（因为拦截器的实例创建逻辑和普通服务不同），导致注入的服务实例是undefined。

为什么加deps会报params.map is not a function？ #

这个错误是因为你大概率在useClass的配置里加了deps属性——deps是专门和useFactory配合使用的，useClass的配置结构里根本没有这个参数，Angular解析配置时把它当成了无效参数，内部处理时触发了数组方法调用错误。

正确的解决方案 #

1. 先确保你的服务是可注入的

先确认LoginLoadingService的装饰器配置正确，推荐用providedIn: 'root'让它成为根级服务，避免重复提供：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // 自动在根注入器注册服务
})
export class LoginLoadingService {
  // 你的业务逻辑，比如控制加载状态
  showLoading(): void { /* ... */ }
  hideLoading(): void { /* ... */ }
}

2. 用useFactory + deps配置拦截器（通用方案）

在AppModule的providers里，通过工厂函数创建拦截器实例，并通过deps声明依赖：

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { YourInterceptor } from './your.interceptor';
import { LoginLoadingService } from './login-loading.service';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      // 工厂函数：接收依赖，返回拦截器实例
      useFactory: (loginLoadingSvc: LoginLoadingService) => new YourInterceptor(loginLoadingSvc),
      // 依赖数组：和工厂函数的参数顺序严格对应
      deps: [LoginLoadingService],
      multi: true // 必须设为true，因为HTTP_INTERCEPTORS是多令牌
    }
  ]
})
export class AppModule {}

3. （Angular 14+ 更简洁方式）用provideHttpClient

如果你的项目是Angular 14及以上版本，推荐用新的HTTP客户端配置方式，不需要手动处理deps：

// 在app.config.ts（独立组件模式）或者AppModule的providers里
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { YourInterceptor } from './your.interceptor';

providers: [
  provideHttpClient(withInterceptors([YourInterceptor]))
]

这种方式下，拦截器的构造函数可以直接注入服务，Angular会自动处理依赖解析：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { LoginLoadingService } from './login-loading.service';

@Injectable()
export class YourInterceptor implements HttpInterceptor {
  constructor(private loginLoadingService: LoginLoadingService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.loginLoadingService.showLoading();
    return next.handle(req).pipe(
      finalize(() => this.loginLoadingService.hideLoading())
    );
  }
}

最后避坑提醒 #

• 绝对不要在useClass的配置里加deps，这是无效配置，会触发你遇到的params.map错误。
• 拦截器的@Injectable()装饰器尽量不要遗漏（虽然工厂方式创建时可以不用，但加上更规范）。

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