Angular HTTP Progress Tracking

1.0.0 verified Wed Apr 22 auth: no javascript abandoned

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.

Common errors

error Error: StaticInjectorError(AppModule)[ProgressHttp]: NullInjectorError: No provider for ProgressHttp! ↓

cause The `ProgressHttpModule` was not correctly imported into your Angular `NgModule`.

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.

error Property 'withUploadProgressListener' does not exist on type 'Http'. ↓

cause You have injected Angular's default `Http` service instead of `ProgressHttp`.

fix

Change your constructor injection from private http: Http to private http: ProgressHttp in your component or service.

error TypeError: Cannot read property 'subscribe' of undefined ↓

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.

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.

Warnings

breaking 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. ↓

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`.

breaking 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. ↓

fix For Angular 2, install `angular-progress-http@0.5.1`. For Angular 4/5, install `angular-progress-http@1.0.0`.

gotcha 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. ↓

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.

Install

npm install angular-progress-http

yarn add angular-progress-http

pnpm add angular-progress-http

Imports

ProgressHttpModule

wrong

const ProgressHttpModule = require('angular-progress-http');

correct

import { ProgressHttpModule } from 'angular-progress-http';

Required for Angular's NgModule imports to make ProgressHttp available.

ProgressHttp

wrong

import ProgressHttp from 'angular-progress-http';

correct

import { ProgressHttp } from 'angular-progress-http';

A named export; provides the service for injection.

Progress
```
import { Progress } from 'angular-progress-http';
```
Interface describing the progress event object passed to listeners (e.g., { loaded: number, total: number, percentage: number }).

Quickstart

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.

import { Component, NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { ProgressHttpModule, ProgressHttp } from 'angular-progress-http';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `
    <h1>HTTP Progress Demo</h1>
    <button (click)="uploadFile()">Upload Dummy File</button>
    <p>Upload Progress: {{ uploadProgress }}%</p>
    <p>Download Progress: {{ downloadProgress }}%</p>
  `
})
export class AppComponent {
  uploadProgress: number = 0;
  downloadProgress: number = 0;

  constructor(private http: ProgressHttp) {}

  uploadFile() {
    const formData = new FormData();
    // Simulate a file or some data
    formData.append('data', 'some long string content to simulate a file for upload progress testing.');

    this.http
      .withUploadProgressListener(progress => {
        console.log(`Uploading ${progress.percentage}%`);
        this.uploadProgress = progress.percentage;
      })
      .withDownloadProgressListener(progress => {
        console.log(`Downloading ${progress.percentage}%`);
        this.downloadProgress = progress.percentage;
      })
      .post('/api/upload', formData) // Replace with a real backend endpoint for testing
      .subscribe(
        (response) => {
          console.log('Upload complete!', response);
          this.uploadProgress = 100;
          this.downloadProgress = 100;
        },
        (error) => {
          console.error('Upload failed!', error);
          this.uploadProgress = 0;
          this.downloadProgress = 0;
        }
      );
  }
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule, // Required for ProgressHttpModule
    ProgressHttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }