基于provideHttpClient，如何不引入HttpClient提供功能性拦截器？

你可以通过共享模块导出拦截器配置函数+静态forRoot方法的方式，既满足不导入HttpClient的要求，又能让应用通过导入模块便捷集成带配置的拦截器，完全适配Angular新的provideHttpClient+withInterceptors API。

步骤1：共享模块的结构设计 #

在共享模块中注册拦截器、配置服务，同时提供静态方法接收配置并导出拦截器提供者：

// shared-interceptors.module.ts
import { NgModule, Provider } from '@angular/core';
import { withInterceptors } from '@angular/common/http';
import { AuthInterceptor, LoggingInterceptor } from './interceptors';
import { SHARED_INTERCEPTORS_CONFIG, SharedInterceptorsConfig } from './config';

// 封装拦截器提供者的函数，接收配置并返回对应的提供者数组
export function provideSharedInterceptors(config: SharedInterceptorsConfig): Provider[] {
  return [
    { provide: SHARED_INTERCEPTORS_CONFIG, useValue: config },
    // 用withInterceptors包装拦截器，返回可直接复用的提供者
    withInterceptors([
      AuthInterceptor,
      LoggingInterceptor
    ])
  ];
}

@NgModule({
  providers: [
    // 注册拦截器（函数式/类式均可）
    AuthInterceptor,
    LoggingInterceptor
  ],
  exports: []
})
export class SharedInterceptorsModule {
  // 静态forRoot方法，让应用导入时传入配置
  static forRoot(config: SharedInterceptorsConfig): { 
    ngModule: typeof SharedInterceptorsModule; 
    providers: Provider[] 
  } {
    return {
      ngModule: SharedInterceptorsModule,
      providers: [...provideSharedInterceptors(config)]
    };
  }
}

步骤2：编写适配新API的拦截器 #

使用Angular新的函数式拦截器（HttpInterceptorFn），通过inject()获取模块配置：

// auth.interceptor.ts
import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { SHARED_INTERCEPTORS_CONFIG } from '../config';

export const AuthInterceptor: HttpInterceptorFn = (req, next) => {
  // 注入共享模块的配置
  const config = inject(SHARED_INTERCEPTORS_CONFIG);
  
  if (config.authToken) {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${config.authToken}`)
    });
    return next(authReq);
  }
  return next(req);
};

步骤3：应用模块集成 #

应用模块只需导入共享模块（通过forRoot传入配置），自行调用provideHttpClient即可自动集成所有拦截器：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { SharedInterceptorsModule } from './shared/shared-interceptors.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 导入共享模块并传入自定义配置
    SharedInterceptorsModule.forRoot({
      authToken: 'user-auth-token',
      enableLogging: true
    })
  ],
  providers: [
    // 应用自行提供HttpClient，Angular会自动合并所有withInterceptors配置的拦截器
    provideHttpClient()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

核心优势 #

• 完全规避废弃API：全程使用Angular推荐的新API，无HTTP_INTERCEPTORS依赖
• 共享模块无HttpClient依赖：仅处理拦截器和配置，HttpClient由应用自行导入
• 配置便捷：通过forRoot传入配置，满足模块参数需求的同时保持单模块导入的简洁性
• 自动合并拦截器：Angular会自动收集所有withInterceptors注册的拦截器，无需手动合并数组

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