Registry / http-networking / ng-http-loader

ng-http-loader

library19.0.0jsnpmunverified

ng-http-loader is an Angular library that provides an automatic loading spinner or progress bar during pending HTTP requests. It achieves this by leveraging Angular's `HttpClient` interceptor mechanism, displaying a visual indicator whenever an active HTTP request is in progress and hiding it once all requests are complete. The current stable version is 19.0.0, which supports Angular 21. The library maintains a rapid release cadence, with new major versions typically released shortly after corresponding Angular major versions to ensure full compatibility and adopt the latest Angular features, such as standalone components, signals, and zoneless change detection. Key differentiators include its tight integration with `HttpClient`, support for various SpinKit-based loaders, and its proactive adoption of modern Angular APIs, providing a streamlined developer experience for adding visual feedback to asynchronous operations.

http-networking web-framework

npm install ng-http-loader

github ↗package ↗

INSTALL

IMPORT

SIG · NG-HTTP-LOADER

ng-http-loader

http-networkingjavascriptv19.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

NgHttpLoaderComponent

✓ import { NgHttpLoaderComponent } from 'ng-http-loader';

✗ import NgHttpLoaderComponent from 'ng-http-loader';

This is a named export for the standalone component, typically imported directly into an Angular component's `imports` array.

pendingRequestsInterceptor$

✓ import { pendingRequestsInterceptor$ } from 'ng-http-loader';

✗ import pendingRequestsInterceptor from 'ng-http-loader';

This is a functional HTTP interceptor, intended for use with Angular's `provideHttpClient(withInterceptors([...]))` function (since Angular 15.2+).

NgHttpLoaderModule

✓ import { NgHttpLoaderModule } from 'ng-http-loader';

✗ const NgHttpLoaderModule = require('ng-http-loader');

Used for traditional Angular modules (NgModules) in non-standalone applications, imported into the module's `imports` array. ng-http-loader is ESM-only.

This quickstart demonstrates how to integrate `ng-http-loader` into a modern Angular standalone application, including importing the loader component and configuring the functional HTTP interceptor.

import { ApplicationConfig, importProvidersFrom } from '@angular/core'; import { provideRouter } from '@angular/router'; import { provideHttpClient, withInterceptors } from '@angular/common/http'; import { NgHttpLoaderComponent, pendingRequestsInterceptor$ } from 'ng-http-loader'; import { Component } from '@angular/core'; // app.component.ts @Component({ selector: 'app-root', standalone: true, template: ` <h1>My Angular App</h1> <ng-http-loader></ng-http-loader> <router-outlet></router-outlet> `, styles: [`h1 { color: #333; }`], imports: [NgHttpLoaderComponent] // <====== import the component }) export class AppComponent { title = 'my-angular-app'; } // app.config.ts import { routes } from './app.routes'; // Assuming you have app.routes defined export const appConfig: ApplicationConfig = { providers: [ provideRouter(routes), provideHttpClient(withInterceptors([pendingRequestsInterceptor$])), ], }; // Example of app.routes.ts (for context) // import { Routes } from '@angular/router'; // export const routes: Routes = [];

Debug

Known issues

breakingStarting from v17.1.0, ng-http-loader transitioned from `@Input` decorators to Angular signals for component inputs. This aligns with modern Angular practices but requires users to update their input binding syntax if upgrading from older versions.

fix

Migrate component input bindings from property binding (`[property]="value"`) to signal-based syntax or ensure you are using a compatible ng-http-loader version for your application's input style.

affects: >=17.1.0

breakingVersion 17.2.0 deprecated and removed `model()` in favor of `input()`. Applications using `model()` for two-way binding with ng-http-loader components will need to refactor.

fix

Replace usages of `model()` with `input()` as per Angular's signal-based input changes. Review ng-http-loader's documentation for updated input properties.

affects: >=17.2.0

breakingVersion 17.3.0 introduced 'zoneless' support, which may impact applications relying on Angular's NgZone for change detection or specific side effects within the loader's lifecycle. While generally an improvement, it might require adjustments in specific edge cases.

fix

Review application code that might explicitly interact with `NgZone` or rely on specific change detection cycles related to HTTP requests. Test thoroughly after upgrading to ensure consistent behavior.

affects: >=17.3.0

gotchaThe `ng-http-loader` library *requires* Angular's `HttpClient` for its functionality. If you are using an older HTTP client (e.g., the deprecated `HttpModule` from `@angular/http`) or not using HTTP requests at all, the spinner will not activate.

fix

Ensure your application uses `HttpClient` from `@angular/common/http` for all HTTP requests. For standalone applications, provide `provideHttpClient` in your application config. For NgModules, import `HttpClientModule`.

affects: >=0.1.0

breakingMajor versions of `ng-http-loader` are tightly coupled with Angular's major versions. Using a version of `ng-http-loader` that is incompatible with your Angular version will result in runtime errors related to metadata mismatch.

fix

Always consult the compatibility table in the README or package documentation to ensure you install the `ng-http-loader` version that explicitly supports your Angular major version (e.g., ng-http-loader v19 for Angular v21).

affects: >=0.1.0

Errors

Common errors & fixes

ERROR in Error: Metadata version mismatch for module [...]/angular/node_modules/ng-http-loader/ng-http-loader.module.d.ts, found version x, expected y [...]

The installed version of ng-http-loader is incompatible with your current Angular major version.

fix

Install the ng-http-loader version that precisely matches your Angular major version, as detailed in the package's compatibility table (e.g., `npm install ng-http-loader@19` for Angular 21).

NG0901: Some of the providers were not statically analyzable. We cannot determine their dependencies or their type.

This error often occurs when trying to use functional interceptors (like `pendingRequestsInterceptor$`) with older Angular module-based provider configurations or incorrect injection tokens.

fix

Ensure you are using `provideHttpClient(withInterceptors([pendingRequestsInterceptor$]))` in your `ApplicationConfig` for standalone apps, or in your `NgModule`'s `providers` array for module-based apps, and that `@angular/common/http` is correctly imported.

Upgrade

Version history

19.0.0latest on npm

Audit

Dependencies

@angular/commonrequiredRequired for HttpClient functionality and common Angular services.

@angular/corerequiredCore Angular functionalities for component rendering, dependency injection, and directives.

rxjsrequiredUnderpins Angular's HttpClient and reactive programming patterns used internally.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/mpalourdio/ng-http-loader ↗

packagehttps://www.npmjs.com/package/ng-http-loader ↗