{"library":"ng-http-caching","title":"Angular HTTP Request Caching","description":"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.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install ng-http-caching"],"cli":null},"imports":["import { provideNgHttpCaching } from 'ng-http-caching';","import { NgHttpCachingConfig } from 'ng-http-caching';","import { NgHttpCachingInterceptor } from 'ng-http-caching';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';\nimport { AppComponent } from './app.component';\nimport { provideNgHttpCaching, NgHttpCachingConfig } from 'ng-http-caching';\nimport { HttpClient } from '@angular/common/http';\nimport { signal } from '@angular/core';\n\n// Example application component\nclass AppComponent {\n  data = signal<any>(null);\n  constructor(private http: HttpClient) {}\n\n  fetchData() {\n    this.http.get('https://jsonplaceholder.typicode.com/posts/1').subscribe(res => {\n      this.data.set(res);\n      console.log('Fetched data:', res);\n    });\n  }\n}\n\n// Optional configuration for ng-http-caching\nconst ngHttpCachingConfig: NgHttpCachingConfig = {\n  lifetime: 5000, // Cache entries expire after 5 seconds\n  allowedMethod: ['GET'] // Only cache GET requests\n};\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideNgHttpCaching(ngHttpCachingConfig), // Provide caching with custom config\n    provideHttpClient(withInterceptorsFromDi()) // Provide HttpClient with interceptors\n  ]\n}).catch(err => console.error(err));\n\n// To demonstrate caching, you would call fetchData() multiple times\n// within the lifetime. The first call hits the network, subsequent calls\n// within 5 seconds retrieve from cache.","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}