Angular拦截器在API调用时失效，懒加载场景下配置求助

一、解决HttpClientModule重复导入问题 #

只在**根模块（app.module.ts）**中导入HttpClientModule，所有懒加载子模块（包括你提到的bootstrap.module.ts）都不要重复导入。因为HttpClient是Angular提供的单例服务，根模块导入HttpClientModule后，整个应用的所有模块都能共享同一个HttpClient实例，无需在子模块再次导入。

二、确保拦截器正确注册 #

拦截器必须在根模块的providers数组中注册，使用HTTP_INTERCEPTORS令牌，且必须设置multi: true（允许多个拦截器共存），示例配置如下：

// app.module.ts
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { YourLoaderInterceptor } from './path-to-your-interceptor';

@NgModule({
  imports: [HttpClientModule], // 只在这里导入
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: YourLoaderInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}

三、规范API服务的提供方式 #

你的自定义API服务（调用httpClient.get()的服务）不要在懒加载子模块中提供，建议：

• 将API服务放在共享模块中，或者直接在根模块的providers中声明，确保整个应用使用同一个服务实例
• 这样服务注入的是根模块的HttpClient，所有请求都会经过拦截器

四、排查拦截器不触发的其他要点 #

1. 在拦截器的intercept方法中添加console.log(req)，检查控制台是否打印请求信息，判断拦截器是否被触发
2. 确认LoaderService中的isLoading是BehaviorSubject或Subject，且组件正确订阅了这个流来控制加载器显示
3. 确保所有API请求都是通过Angular的HttpClient发起，没有使用原生fetch或XMLHttpRequest

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