{"id":17154,"library":"angular-progress-http","title":"Angular HTTP Progress Tracking","description":"angular-progress-http is a specialized library providing upload and download progress tracking for HTTP requests within Angular applications. Its `1.0.0` version, which is the latest, is explicitly designed for Angular 4 and 5 environments, relying on the `@angular/http` module and RxJS 5. The library functions as a thin wrapper around Angular's standard `Http` service, extending its capabilities to expose XMLHttpRequest-level progress events through an Angular-friendly observable pattern. Key differentiators include its fluent, immutable API, where `withUploadProgressListener` and `withDownloadProgressListener` methods return new service instances, ensuring that progress handlers are not accidentally overwritten and providing type-safe chaining. This design allows for separate, distinct listeners for both upload and download events, a crucial feature for applications involving large file transfers or data intensive operations during its active development period. Given the deprecation and subsequent removal of `@angular/http` in newer Angular versions, this package is no longer compatible with modern Angular applications.","status":"abandoned","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/DarkXaHTeP/angular-progress-http","tags":["javascript","angular","angular2","angular 2","ng2","http","progress","xhr","XMLHttpRequest","typescript"],"install":[{"cmd":"npm install angular-progress-http","lang":"bash","label":"npm"},{"cmd":"yarn add angular-progress-http","lang":"bash","label":"yarn"},{"cmd":"pnpm add angular-progress-http","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core Angular functionality; required for module and dependency injection.","package":"@angular/core","optional":false},{"reason":"The specific HTTP client this library wraps and extends for progress tracking.","package":"@angular/http","optional":false},{"reason":"Provides Observable functionality for handling asynchronous HTTP responses.","package":"rxjs","optional":false}],"imports":[{"note":"Required for Angular's NgModule imports to make ProgressHttp available.","wrong":"const ProgressHttpModule = require('angular-progress-http');","symbol":"ProgressHttpModule","correct":"import { ProgressHttpModule } from 'angular-progress-http';"},{"note":"A named export; provides the service for injection.","wrong":"import ProgressHttp from 'angular-progress-http';","symbol":"ProgressHttp","correct":"import { ProgressHttp } from 'angular-progress-http';"},{"note":"Interface describing the progress event object passed to listeners (e.g., { loaded: number, total: number, percentage: number }).","symbol":"Progress","correct":"import { Progress } from 'angular-progress-http';"}],"quickstart":{"code":"import { Component, NgModule } from '@angular/core';\nimport { HttpModule } from '@angular/http';\nimport { ProgressHttpModule, ProgressHttp } from 'angular-progress-http';\nimport { BrowserModule } from '@angular/platform-browser';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <h1>HTTP Progress Demo</h1>\n    <button (click)=\"uploadFile()\">Upload Dummy File</button>\n    <p>Upload Progress: {{ uploadProgress }}%</p>\n    <p>Download Progress: {{ downloadProgress }}%</p>\n  `\n})\nexport class AppComponent {\n  uploadProgress: number = 0;\n  downloadProgress: number = 0;\n\n  constructor(private http: ProgressHttp) {}\n\n  uploadFile() {\n    const formData = new FormData();\n    // Simulate a file or some data\n    formData.append('data', 'some long string content to simulate a file for upload progress testing.');\n\n    this.http\n      .withUploadProgressListener(progress => {\n        console.log(`Uploading ${progress.percentage}%`);\n        this.uploadProgress = progress.percentage;\n      })\n      .withDownloadProgressListener(progress => {\n        console.log(`Downloading ${progress.percentage}%`);\n        this.downloadProgress = progress.percentage;\n      })\n      .post('/api/upload', formData) // Replace with a real backend endpoint for testing\n      .subscribe(\n        (response) => {\n          console.log('Upload complete!', response);\n          this.uploadProgress = 100;\n          this.downloadProgress = 100;\n        },\n        (error) => {\n          console.error('Upload failed!', error);\n          this.uploadProgress = 0;\n          this.downloadProgress = 0;\n        }\n      );\n  }\n}\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    HttpModule, // Required for ProgressHttpModule\n    ProgressHttpModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }","lang":"typescript","description":"Demonstrates how to import `ProgressHttpModule` into an Angular module, inject `ProgressHttp` into a component, and utilize its `withUploadProgressListener` and `withDownloadProgressListener` methods to track and display HTTP request progress."},"warnings":[{"fix":"For modern Angular applications (v9+), use the `HttpClient` from `@angular/common/http` which has built-in progress tracking support. Consult the Angular documentation for `HttpClient`.","message":"This library is built for Angular 4 and 5, relying on the `@angular/http` module. `@angular/http` was deprecated in Angular 5 and completely removed in Angular 9. This package is fundamentally incompatible with Angular versions 9 and newer.","severity":"breaking","affected_versions":">=6.0"},{"fix":"For Angular 2, install `angular-progress-http@0.5.1`. For Angular 4/5, install `angular-progress-http@1.0.0`.","message":"Older Angular 2 projects require a specific version (`0.5.1`) of `angular-progress-http`. The `1.0.0` version is only compatible with Angular 4 and 5.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Always chain different listener types or call a listener only once before executing the HTTP method. For example: `this.http.withUpload().withDownload().post(...)` is correct, but `this.http.withUpload().withUpload().post(...)` is redundant and the first listener will be ignored.","message":"The `withUploadProgressListener` and `withDownloadProgressListener` methods are immutable; they return new instances of the service. Chaining multiple calls of the *same* listener type (`.withUploadProgressListener(...).withUploadProgressListener(...)`) will overwrite previous listeners, only the last one will be active. The API design enforces this for type safety.","severity":"gotcha","affected_versions":">=0.5.1"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure `ProgressHttpModule` is listed in the `imports` array of your main Angular module (e.g., `AppModule`). Also, ensure `HttpModule` (from `@angular/http`) is imported first, as `ProgressHttpModule` relies on it.","cause":"The `ProgressHttpModule` was not correctly imported into your Angular `NgModule`.","error":"Error: StaticInjectorError(AppModule)[ProgressHttp]: NullInjectorError: No provider for ProgressHttp!"},{"fix":"Change your constructor injection from `private http: Http` to `private http: ProgressHttp` in your component or service.","cause":"You have injected Angular's default `Http` service instead of `ProgressHttp`.","error":"Property 'withUploadProgressListener' does not exist on type 'Http'."},{"fix":"Verify that your `post`, `get`, or other HTTP method call is syntactically correct and that `HttpModule` from `@angular/http` is imported in your root module before `ProgressHttpModule`.","cause":"This error typically indicates that the HTTP method (e.g., `post`, `get`) was not called or did not return an Observable, or the base `HttpModule` itself is not correctly set up.","error":"TypeError: Cannot read property 'subscribe' of undefined"}],"ecosystem":"npm","meta_description":null}