{"id":16455,"library":"ng-http-loader","title":"Angular HTTP Loader and Spinner","description":"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.","status":"active","version":"19.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/mpalourdio/ng-http-loader","tags":["javascript","angular","ng2","ng21","loader","progressbar","spinner","spinkit","interceptor","typescript"],"install":[{"cmd":"npm install ng-http-loader","lang":"bash","label":"npm"},{"cmd":"yarn add ng-http-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add ng-http-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for HttpClient functionality and common Angular services.","package":"@angular/common","optional":false},{"reason":"Core Angular functionalities for component rendering, dependency injection, and directives.","package":"@angular/core","optional":false},{"reason":"Underpins Angular's HttpClient and reactive programming patterns used internally.","package":"rxjs","optional":false}],"imports":[{"note":"This is a named export for the standalone component, typically imported directly into an Angular component's `imports` array.","wrong":"import NgHttpLoaderComponent from 'ng-http-loader';","symbol":"NgHttpLoaderComponent","correct":"import { NgHttpLoaderComponent } from 'ng-http-loader';"},{"note":"This is a functional HTTP interceptor, intended for use with Angular's `provideHttpClient(withInterceptors([...]))` function (since Angular 15.2+).","wrong":"import pendingRequestsInterceptor from 'ng-http-loader';","symbol":"pendingRequestsInterceptor$","correct":"import { pendingRequestsInterceptor$ } from 'ng-http-loader';"},{"note":"Used for traditional Angular modules (NgModules) in non-standalone applications, imported into the module's `imports` array. ng-http-loader is ESM-only.","wrong":"const NgHttpLoaderModule = require('ng-http-loader');","symbol":"NgHttpLoaderModule","correct":"import { NgHttpLoaderModule } from 'ng-http-loader';"}],"quickstart":{"code":"import { ApplicationConfig, importProvidersFrom } from '@angular/core';\nimport { provideRouter } from '@angular/router';\nimport { provideHttpClient, withInterceptors } from '@angular/common/http';\nimport { NgHttpLoaderComponent, pendingRequestsInterceptor$ } from 'ng-http-loader';\nimport { Component } from '@angular/core';\n\n// app.component.ts\n@Component({\n    selector: 'app-root',\n    standalone: true,\n    template: `\n        <h1>My Angular App</h1>\n        <ng-http-loader></ng-http-loader>\n        <router-outlet></router-outlet>\n    `,\n    styles: [`h1 { color: #333; }`],\n    imports: [NgHttpLoaderComponent] // <====== import the component\n})\nexport class AppComponent {\n    title = 'my-angular-app';\n}\n\n// app.config.ts\nimport { routes } from './app.routes'; // Assuming you have app.routes defined\nexport const appConfig: ApplicationConfig = {\n    providers: [\n        provideRouter(routes),\n        provideHttpClient(withInterceptors([pendingRequestsInterceptor$])),\n    ],\n};\n\n// Example of app.routes.ts (for context)\n// import { Routes } from '@angular/router';\n// export const routes: Routes = [];","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Starting 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.","severity":"breaking","affected_versions":">=17.1.0"},{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=17.2.0"},{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=17.3.0"},{"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`.","message":"The `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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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).","message":"Major 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.","severity":"breaking","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"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).","cause":"The installed version of ng-http-loader is incompatible with your current Angular major version.","error":"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 [...]"},{"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.","cause":"This error often occurs when trying to use functional interceptors (like `pendingRequestsInterceptor$`) with older Angular module-based provider configurations or incorrect injection tokens.","error":"NG0901: Some of the providers were not statically analyzable. We cannot determine their dependencies or their type."}],"ecosystem":"npm"}