Registry / http-networking / ng-http-caching

ng-http-caching

library21.0.10jsnpmunverified

NgHttpCaching is an Angular library designed to cache HTTP requests, preventing redundant server calls for the same data. It operates as an HTTP interceptor, automatically caching responses and serving them for subsequent identical requests. The current stable version is 21.0.10, closely aligning with Angular's major version releases (indicated by peer dependency versions and the default cache invalidation strategy). Key differentiators include built-in handling for simultaneous/parallel requests, an automatic garbage collector for cache entries, support for various storage mechanisms (LocalStorage, SessionStorage, MemoryStorage, or custom), and intelligent cache invalidation based on `Cache-Control`/`Expires` headers or automatically for mutation requests (POST, PUT, DELETE, PATCH). It offers granular configuration for cache lifetime, allowed HTTP methods, and custom cache strategies, making it a flexible solution for optimizing network performance in Angular applications.

http-networking web-framework

npm install ng-http-caching

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · NG-HTTP-CACHING

ng-http-caching

http-networkingjavascriptv21.0.10

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.

provideNgHttpCaching

✓ import { provideNgHttpCaching } from 'ng-http-caching';

✗ import { NgHttpCachingModule } from 'ng-http-caching'; // For Angular 15+ standalone APIs

For Angular 15+ and standalone components, use `provideNgHttpCaching` in your `bootstrapApplication` or component providers. Older Angular versions might have used `NgHttpCachingModule.forRoot()`.

NgHttpCachingConfig

✓ import { NgHttpCachingConfig } from 'ng-http-caching';

This is a TypeScript interface for configuring the caching behavior.

NgHttpCachingInterceptor

✓ import { NgHttpCachingInterceptor } from 'ng-http-caching';

While `provideNgHttpCaching()` registers the interceptor automatically, you might import `NgHttpCachingInterceptor` directly if you need to manually provide it or extend its functionality in advanced scenarios, though it's less common for basic usage.

This quickstart demonstrates how to integrate `ng-http-caching` into an Angular standalone application, providing custom configuration for cache lifetime and methods. It shows the basic setup required to enable HTTP request caching through the `provideNgHttpCaching` function and sets up a simple component to make an HTTP request that will be cached.

import { bootstrapApplication } from '@angular/platform-browser'; import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; import { AppComponent } from './app.component'; import { provideNgHttpCaching, NgHttpCachingConfig } from 'ng-http-caching'; import { HttpClient } from '@angular/common/http'; import { signal } from '@angular/core'; // Example application component class AppComponent { data = signal<any>(null); constructor(private http: HttpClient) {} fetchData() { this.http.get('https://jsonplaceholder.typicode.com/posts/1').subscribe(res => { this.data.set(res); console.log('Fetched data:', res); }); } } // Optional configuration for ng-http-caching const ngHttpCachingConfig: NgHttpCachingConfig = { lifetime: 5000, // Cache entries expire after 5 seconds allowedMethod: ['GET'] // Only cache GET requests }; bootstrapApplication(AppComponent, { providers: [ provideNgHttpCaching(ngHttpCachingConfig), // Provide caching with custom config provideHttpClient(withInterceptorsFromDi()) // Provide HttpClient with interceptors ] }).catch(err => console.error(err)); // To demonstrate caching, you would call fetchData() multiple times // within the lifetime. The first call hits the network, subsequent calls // within 5 seconds retrieve from cache.

Debug

Known issues

breakingThe library's major version closely follows Angular's major version. Upgrading Angular (e.g., from v14 to v15, or v15 to v16) likely requires upgrading `ng-http-caching` to its corresponding major version. This often introduces breaking changes in API surface or configuration, especially with the shift to standalone APIs.

fix

Consult the `ng-http-caching` release notes for the specific major version you are upgrading to. Ensure peer dependencies on `@angular/common` and `@angular/core` are met. For Angular 15+, adapt to `provideNgHttpCaching()` instead of `NgHttpCachingModule`.

affects: >=15.0.0

gotchaBy default, the cache `version` is tied to Angular's major version. This means cache entries are automatically invalidated and cleared on every Angular upgrade. While generally beneficial for preventing stale data issues, be aware if you need more persistent caching across Angular versions or have a custom invalidation strategy.

fix

If you require caching to persist across Angular major version upgrades, you can explicitly set the `version` property in `NgHttpCachingConfig` to a static string or a custom versioning scheme. Be cautious, as this might lead to compatibility issues if cached data structures change with Angular versions.

affects: >=15.0.0

gotchaForgetting to provide `provideHttpClient(withInterceptorsFromDi())` alongside `provideNgHttpCaching()` will result in the caching interceptor not being registered, and caching will not occur. This is a common pitfall when setting up Angular's HttpClient with interceptors in a standalone application.

fix

Ensure that `provideHttpClient(withInterceptorsFromDi())` is included in your application's root `providers` array (e.g., in `bootstrapApplication` or `app.config.ts`) when using `provideNgHttpCaching()`.

affects: >=15.0.0

deprecatedThe `NgHttpCachingModule` (module-based approach) is deprecated for Angular 15+ standalone applications. While it might still work for applications using NgModules, the recommended approach is to use the new functional `provideNgHttpCaching` API.

fix

Migrate from `imports: [NgHttpCachingModule.forRoot(config)]` to `providers: [provideNgHttpCaching(config)]` in your application configuration or component providers, following Angular's standalone component best practices.

affects: >=15.0.0

Errors

Common errors & fixes

NG0201: No provider for HttpClient!

You are attempting to use HttpClient in a component or service without providing it in the application's root providers.

fix

Add `provideHttpClient()` (or `provideHttpClient(withInterceptorsFromDi())` if using interceptors) to the `providers` array in your `bootstrapApplication` call or `app.config.ts`.

Error: NgHttpCachingInterceptor is not provided.

The `NgHttpCachingInterceptor` is not registered with Angular's HTTP interceptor system, likely because `provideNgHttpCaching()` was not called or `provideHttpClient(withInterceptorsFromDi())` is missing.

fix

Ensure both `provideNgHttpCaching()` and `provideHttpClient(withInterceptorsFromDi())` are present in your application's root `providers` array. If you are using NgModules, verify `NgHttpCachingModule.forRoot()` is imported.

Upgrade

Version history

21.0.10latest on npm

Audit

Dependencies

@angular/commonrequiredCore Angular HTTP client functionality and interceptor mechanisms.

@angular/corerequiredFundamental Angular decorators and utilities required for application bootstrapping and module definition.

ng-simple-staterequiredUsed internally by ng-http-caching for state management of the cache, though not directly exposed in the public API.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/nigrosimone/ng-http-caching ↗

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

homepagehttps://ngneat.github.io/ng-http-caching ↗