Angular 15中LoadingInterceptor注入LoadingService报错求解决方案

环境信息 #

Angular CLI: 15.2.0
Node: 18.14.2
Package Manager: npm 9.5.0
OS: win32 x64

Angular: 15.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.0
@angular-devkit/build-angular   15.2.0
@angular-devkit/core            15.2.0
@angular-devkit/schematics      15.2.0
@schematics/angular             15.2.0
rxjs                            7.8.0
typescript                      4.9.5

已执行操作 #

• 执行npm install ngx-spinner --save
• 已配置AppModule引入ngx-spinner模块

相关代码 #

loading.service.ts #

import { Injectable } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
@Injectable({
  providedIn: 'root',
})
export class LoadingService {
  loadingReqCount = 0;
  constructor(private spinnerService: NgxSpinnerService) {}
  loading() {
    this.loadingReqCount++;
    this.spinnerService.show(undefined, {
      type: 'ball-pulse-sync',
      bdColor: 'rgba(255,255,255,0.7)',
      /* color: '#333333' */
      color: '#FF0000',
    });
  }
  idle() {
    this.loadingReqCount--;
    if (this.loadingReqCount <= 0) {
      this.loadingReqCount = 0;
      this.spinnerService.hide();
    }
  }
}

loading.interceptor.ts #

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { LoadingService } from 'src/app/core/services/loading.service';
import { delay, finalize } from 'rxjs/operators';

@Injectable()

export class LoadingInterceptor implements HttpInterceptor {
    constructor(private loadingService: LoadingService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    this.loadingService.loading();
    return next.handle(request).pipe(
      delay(1000),  // delays for 1 second
      finalize(() => {
        this.loadingService.idle();
      })
    )
  }
}

报错信息 #

No suitable injection token for parameter 'loadingService' of class 'LoadingInterceptor'.
  Consider using the @Inject decorator to specify an injection token.(-992003)
loading.interceptor.ts(10, 41): This type does not have a value, so it cannot be used as injection token.

问题原因 #

核心原因是Angular依赖注入系统无法正确解析拦截器中的LoadingService依赖：

1. 拦截器仅用@Injectable()但未配置providedIn时，Angular无法自动将其纳入依赖注入树；
2. 若未在AppModule的providers中显式注册拦截器并关联HTTP_INTERCEPTORS令牌，会导致依赖链断裂，无法识别LoadingService的注入令牌。

解决方法 #

步骤1：在AppModule中正确注册拦截器 #

打开AppModule，确保在providers数组中配置拦截器，同时确认NgxSpinnerModule已导入：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { LoadingInterceptor } from './core/interceptors/loading.interceptor'; // 根据实际路径调整
import { NgxSpinnerModule } from 'ngx-spinner';

@NgModule({
  declarations: [
    // 你的组件列表
  ],
  imports: [
    BrowserModule,
    NgxSpinnerModule // 确保ngx-spinner模块已导入
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoadingInterceptor,
      multi: true // 允许同时使用多个HTTP拦截器
    }
  ],
  bootstrap: [/* 你的根组件，比如AppComponent */]
})
export class AppModule { }

步骤2：优化拦截器的注入配置（可选） #

给拦截器的@Injectable()添加providedIn: 'root'，让Angular自动管理其注入，进一步避免依赖解析问题：

@Injectable({
  providedIn: 'root' // 添加此行
})
export class LoadingInterceptor implements HttpInterceptor {
    constructor(private loadingService: LoadingService) {}

  // 其余代码保持不变
}

步骤3：检查导入路径 #

确认LoadingService的导入路径'src/app/core/services/loading.service'与实际文件位置完全匹配，路径错误也会导致依赖无法识别。

验证 #

修改完成后重启Angular开发服务（执行ng serve），发起HTTP请求测试，ngx-spinner应能正常显示/隐藏，且原报错消失。

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