{"id":16454,"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.","status":"active","version":"21.0.10","language":"javascript","source_language":"en","source_url":"https://github.com/nigrosimone/ng-http-caching","tags":["javascript","angular","cache","interceptor","network","http","client","http-client","header","typescript"],"install":[{"cmd":"npm install ng-http-caching","lang":"bash","label":"npm"},{"cmd":"yarn add ng-http-caching","lang":"bash","label":"yarn"},{"cmd":"pnpm add ng-http-caching","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core Angular HTTP client functionality and interceptor mechanisms.","package":"@angular/common","optional":false},{"reason":"Fundamental Angular decorators and utilities required for application bootstrapping and module definition.","package":"@angular/core","optional":false},{"reason":"Used internally by ng-http-caching for state management of the cache, though not directly exposed in the public API.","package":"ng-simple-state","optional":false}],"imports":[{"note":"For Angular 15+ and standalone components, use `provideNgHttpCaching` in your `bootstrapApplication` or component providers. Older Angular versions might have used `NgHttpCachingModule.forRoot()`.","wrong":"import { NgHttpCachingModule } from 'ng-http-caching'; // For Angular 15+ standalone APIs","symbol":"provideNgHttpCaching","correct":"import { provideNgHttpCaching } from 'ng-http-caching';"},{"note":"This is a TypeScript interface for configuring the caching behavior.","symbol":"NgHttpCachingConfig","correct":"import { NgHttpCachingConfig } from 'ng-http-caching';"},{"note":"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.","symbol":"NgHttpCachingInterceptor","correct":"import { NgHttpCachingInterceptor } from 'ng-http-caching';"}],"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."},"warnings":[{"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`.","message":"The 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.","severity":"breaking","affected_versions":">=15.0.0"},{"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.","message":"By 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.","severity":"gotcha","affected_versions":">=15.0.0"},{"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()`.","message":"Forgetting 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.","severity":"gotcha","affected_versions":">=15.0.0"},{"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.","message":"The `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.","severity":"deprecated","affected_versions":">=15.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Add `provideHttpClient()` (or `provideHttpClient(withInterceptorsFromDi())` if using interceptors) to the `providers` array in your `bootstrapApplication` call or `app.config.ts`.","cause":"You are attempting to use HttpClient in a component or service without providing it in the application's root providers.","error":"NG0201: No provider for HttpClient!"},{"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.","cause":"The `NgHttpCachingInterceptor` is not registered with Angular's HTTP interceptor system, likely because `provideNgHttpCaching()` was not called or `provideHttpClient(withInterceptorsFromDi())` is missing.","error":"Error: NgHttpCachingInterceptor is not provided."}],"ecosystem":"npm"}