如何在provideNgProgressHttp中内置progressInterceptor简化用户使用？

我开发的库导出了progressInterceptor这个HTTP拦截器，当前用户激活它需要编写如下代码：

import { provideNgProgressHttp, progressInterceptor } from 'ngx-progressbar/http';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(
      withInterceptors([progressInterceptor])
    ),
    provideNgProgressHttp()
  ]
});

我想省去withInterceptors([progressInterceptor])这一步，让用户仅调用provideNgProgressHttp()就能自动内置该拦截器，请问这可行吗？

期望的使用方式：

import { provideNgProgressHttp } from 'ngx-progressbar/http';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    provideNgProgressHttp()
  ]
});

以下是我的现有代码：
拦截器函数：

export function progressInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
  return next(req).pipe(
    finalize(() => {
      // 业务逻辑代码
    })
  );
}

提供者函数：

export const NG_PROGRESS_HTTP_CONFIG: InjectionToken<NgProgressHttpConfig> = new InjectionToken<NgProgressHttpConfig>('ngProgressHttpConfig');

export function provideNgProgressHttp(config?: NgProgressHttpConfig): Provider {
  return [
    {
      provide: NG_PROGRESS_HTTP_CONFIG,
      useValue: config
    }
  ];
}

完全可行，你只需要修改provideNgProgressHttp函数，在返回的提供者数组中添加一个多提供者，把progressInterceptor注册到Angular内置的HTTP_INTERCEPTOR_FNS令牌中即可。这个令牌专门用于注册函数式HTTP拦截器，和withInterceptors的底层实现逻辑一致。

修改后的提供者函数代码如下：

import { Provider, InjectionToken, HTTP_INTERCEPTOR_FNS } from '@angular/common/http';
import { progressInterceptor } from './path-to-interceptor';
import { NgProgressHttpConfig } from './path-to-config';

export const NG_PROGRESS_HTTP_CONFIG: InjectionToken<NgProgressHttpConfig> = new InjectionToken<NgProgressHttpConfig>('ngProgressHttpConfig');

export function provideNgProgressHttp(config?: NgProgressHttpConfig): Provider[] {
  return [
    {
      provide: NG_PROGRESS_HTTP_CONFIG,
      useValue: config
    },
    // 自动注册拦截器
    {
      provide: HTTP_INTERCEPTOR_FNS,
      useValue: progressInterceptor,
      multi: true
    }
  ];
}

这样用户只需调用provideNgProgressHttp()，拦截器就会自动被注入到HTTP客户端的拦截器链中，完全不需要手动通过withInterceptors添加。

需要注意：

• 确保导入HTTP_INTERCEPTOR_FNS令牌（来自@angular/common/http）
• 必须设置multi: true，因为HTTP_INTERCEPTOR_FNS是一个多值提供者，允许多个拦截器注册
• 用户仍然需要在providers中保留provideHttpClient()，这是Angular HTTP客户端的基础配置

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