Angular HTTP Progress Tracking

Common errors

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

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

• 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 npm
• yarn add angular-progress-http yarn
• pnpm add angular-progress-http pnpm

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 { }