Angular HTTP Request Caching

Common errors

• NG0201: No provider for HttpClient!

  cause 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.

  cause 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.

Warnings

• breaking 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.
  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`.
• gotcha 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.
  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.
• gotcha 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.
  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()`.
• deprecated 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.
  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.

Install

• npm install ng-http-caching npm
• yarn add ng-http-caching yarn
• pnpm add ng-http-caching pnpm

Imports

• provideNgHttpCaching
  wrong:

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

  correct:

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

  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.

Quickstart

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.