Angular 15升级16后angular-progress-http模块兼容问题求助

问题根源 #

angular-progress-http的1.0.0版本是多年前的废弃包，早已停止维护，完全不兼容Angular 16的构建规范和模块机制——VS Code的语法检查仅做静态校验，不会检测依赖的版本兼容性，但Angular CLI的构建流程会严格校验，这就是终端报错的核心原因。

具体解决步骤 #

1. 彻底移除废弃依赖 #

先执行命令卸载旧包：

npm uninstall angular-progress-http

检查package.json，确保该包不在dependencies或devDependencies列表中，再清理残留文件并重新安装依赖：

rm -rf node_modules package-lock.json
npm install

2. 用Angular官方API实现进度监听 #

无需第三方包，直接用Angular自带的HttpClient结合RxJS就能稳定实现上传/下载进度监听，这是官方推荐方案：

• 先在服务中封装进度监听逻辑：

  import { Injectable } from '@angular/core';
  import { HttpClient, HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  @Injectable({ providedIn: 'root' })
  export class ProgressHttpService {
    constructor(private http: HttpClient) {}
  
    // 文件上传进度监听示例
    uploadFile(file: File, apiUrl: string): Observable<{ progress: number; response?: any }> {
      const formData = new FormData();
      formData.append('file', file);
  
      return new Observable(observer => {
        const req = new HttpRequest('POST', apiUrl, formData, {
          reportProgress: true
        });
  
        this.http.request(req).subscribe(event => {
          if (event.type === HttpEventType.UploadProgress) {
            const progress = Math.round((100 * event.loaded) / (event.total || 1));
            observer.next({ progress });
          } else if (event instanceof HttpResponse) {
            observer.next({ progress: 100, response: event.body });
            observer.complete();
          }
        }, error => observer.error(error));
      });
    }
  
    // 文件下载进度监听示例
    downloadFile(apiUrl: string): Observable<{ progress: number; blob?: Blob }> {
      return new Observable(observer => {
        const req = new HttpRequest('GET', apiUrl, {
          reportProgress: true,
          responseType: 'blob'
        });
  
        this.http.request(req).subscribe(event => {
          if (event.type === HttpEventType.DownloadProgress) {
            const progress = Math.round((100 * event.loaded) / (event.total || 1));
            observer.next({ progress });
          } else if (event instanceof HttpResponse) {
            observer.next({ progress: 100, blob: event.body });
            observer.complete();
          }
        }, error => observer.error(error));
      });
    }
  }
  

• 在组件中调用该服务：

  import { Component } from '@angular/core';
  import { ProgressHttpService } from './progress-http.service';
  
  @Component({
    selector: 'app-file-handler',
    template: `<input type="file" (change)="handleFileUpload($event)">`
  })
  export class FileHandlerComponent {
    constructor(private progressHttpService: ProgressHttpService) {}
  
    handleFileUpload(event: Event) {
      const file = (event.target as HTMLInputElement).files?.[0];
      if (!file) return;
  
      this.progressHttpService.uploadFile(file, '/api/upload').subscribe({
        next: res => {
          console.log(`当前进度: ${res.progress}%`);
          if (res.response) console.log('上传完成，返回数据:', res.response);
        },
        error: err => console.error('上传失败:', err)
      });
    }
  }
  

3. 清理旧包的所有引用 #

检查项目中所有文件（如app.module.ts、各组件、服务文件），删除所有import { ProgressHttpModule } from 'angular-progress-http';以及相关的模块注册、服务注入代码，避免残留引用导致构建报错。

4. 可选：使用维护中的第三方包 #

如果习惯用第三方工具，推荐使用ngx-progressbar（支持Angular 16+），但官方方案已足够满足需求，无需额外引入依赖。

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