Angular 6自定义进度服务订阅无日志输出，求排查方案

我来帮你排查这个问题，从你的代码和配置来看，有几个关键点需要调整和验证：

1. 调整Subject类型，确保订阅不丢失事件 #

你当前用的Subject有个特性：只向「订阅之后」发送的事件推送数据。如果你的文件上传请求在订阅uploadProgress之前就已经发起，那之前的进度事件会直接丢失，控制台自然看不到日志。

建议把uploadProgress和downloadProgress改成BehaviorSubject（需要设置初始值），这样新订阅者能立即拿到最新的进度值，哪怕订阅是在请求发起之后：

import { Injectable } from '@angular/core'; 
import { BehaviorSubject } from 'rxjs'; 
import { BrowserXhr } from '@angular/http'; 

@Injectable() 
export class ProgressService { 
  // 设置初始值，确保订阅者能收到初始状态
  uploadProgress = new BehaviorSubject<any>({ total: 0, percentage: 0 }); 
  downloadProgress = new BehaviorSubject<any>({ total: 0, percentage: 0 }); 
}

2. 修正提供者的注入顺序 #

BrowserXhrWithProgress依赖ProgressService，所以必须在providers里先声明ProgressService，再声明BrowserXhr的自定义实现——不然Angular注入时会找不到ProgressService的实例，导致进度事件根本无法推送：

providers: [
  ProgressService,
  { provide: BrowserXhr, useClass: BrowserXhrWithProgress }
]

3. 验证上传事件是否真的被触发 #

xhr.upload.onprogress只有在有实际数据上传到服务器时才会触发（比如POST/PUT请求且请求体包含文件）。如果你的请求是GET，或者没有真正的文件上传操作，这个事件不会执行。

你可以在BrowserXhrWithProgress里加日志，确认XHR实例和事件绑定是否正常：

build(): XMLHttpRequest { 
  var xhr: XMLHttpRequest = super.build(); 
  console.log('自定义XHR实例已创建'); // 确认XHR被正确实例化
  xhr.upload.onprogress = (event) => { 
    console.log('上传进度事件触发'); // 确认事件是否执行
    this.service.uploadProgress.next(this.createProgress(event)); 
  }; 
  return xhr; 
}

4. 检查RxJS导入的兼容性 #

如果你的Angular版本是6+，RxJS的导入方式已经更新，建议直接从rxjs导入所需类，避免全量导入的潜在问题：

import { BehaviorSubject } from 'rxjs';

按照上面的步骤逐一排查，应该就能解决控制台无日志的问题了。

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