ngx-loading-bar仅路由生效，如何配置使其在HTTP请求时也显示进度条

• 确认依赖完整安装
  执行命令安装所有需要的包：

npm install @ngx-loading-bar/core @ngx-loading-bar/http-client @ngx-loading-bar/router

• 确认请求使用Angular内置HttpClient
LoadingBarHttpClientModule仅能拦截通过HttpClient发起的请求，如果你使用了原生XMLHttpRequest、fetch或者第三方请求库，模块默认的拦截逻辑无法生效，CRUD操作请统一使用HttpClient发起请求。

• 检查拦截器逻辑
  你当前的模块导入顺序符合要求：HttpClientModule在LoadingBarHttpClientModule之前导入，拦截器注册顺序正确。如果项目中存在自定义HttpInterceptor，避免在拦截器中直接返回请求、跳过后续拦截链路。

• 调整默认触发延迟
  ngx-loading-bar默认有200ms的触发延迟，响应速度快于这个阈值的请求不会触发进度条显示，你可以调整全局配置取消延迟：
  在app.module.ts中导入核心模块：

import { LoadingBarModule } from '@ngx-loading-bar/core';

在imports数组中添加配置项：

imports: [
  // 保留原有所有导入项
  LoadingBarModule.forRoot({
    latencyThreshold: 0, // 有请求就立即显示进度条
    spinner: false // 可选，关闭右上角默认的加载小圆点
  })
]

• 手动控制进度条（兜底方案）
  如果以上配置都不符合你的业务场景，可以直接注入LoadingBarService手动控制显示时机：

// 业务组件或服务中
import { LoadingBarService } from '@ngx-loading-bar/core';
import { HttpClient } from '@angular/common/http';
import { finalize } from 'rxjs';

@Injectable()
export class YourCrudService {
  constructor(
    private http: HttpClient,
    private loadingBar: LoadingBarService
  ) {}

  addData(data: any) {
    this.loadingBar.start(); // 发起请求前启动进度条
    return this.http.post('/api/your-interface', data).pipe(
      finalize(() => this.loadingBar.complete()) // 请求无论成功失败都关闭进度条
    )
  }
}

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