函数式拦截器：如何为其注入依赖？

假设你向客户端提供类库，以依赖SpinnerService的加载拦截器为例，下面梳理不同实现方式的问题：

旧版配置方式 #

传统NgModule的providers配置可以直接实现需求：

providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    },
    SpinnerService
]

过渡版封装方案 #

类库也可以通过makeEnvironmentProviders封装成可调用的函数（类似forRoot的作用）：

export const provideAuthInterceptor = () =>
  makeEnvironmentProviders([
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    },
    SpinnerService
  ]);

函数式风格的适配困境 #

如果要切换到Angular新的函数式HTTP客户端方案，需要结合provideHttpClient和withInterceptors实现：

export const provideAppHttpInterceptors = () =>
  makeEnvironmentProviders([
    SpinnerService,
    provideHttpClient(withInterceptors([
      authInterceptor,
      loggingInterceptor
    ]))
  ]);

但这里存在核心问题：如果客户端已经在自身代码中调用了provideHttpClient，类库提供的上述函数会导致HttpClient被重复注册，进而覆盖客户端的原有配置。这就意味着客户端无法直接复用类库封装好的函数，必须手动自行配置SpinnerService和拦截器逻辑。

不得不说，Angular的新函数式特性初看确实亮眼，但在类库开发场景中用得越多，越觉得不如旧的NgModule方案省心好用。

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