ngx-cache-kit

The cleanest, most powerful HTTP caching solution for modern Angular

• Checkmark Zero-config setup with provideCacheKit()
• Checkmark Tag-based cache invalidation
• Checkmark Flexible TTL (seconds → days)
• Checkmark Full POST/PUT body-aware caching (SHA-256 hash)
• Checkmark Tiny ~3 KB · No RxJS bloat · Angular 15 – 21+ ready

Installation

npm install ngx-cache-kit

1. Enable cache globally (just ONE line!)

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideCacheKit } from 'ngx-cache-kit';

export const appConfig: ApplicationConfig = {
  providers: [
    provideCacheKit({
      ttl: { value: 10, unit: 'minute' },
    }),
    provideHttpClient(), // no need for withInterceptors!
  ],
};

2. Use it in your services

import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { cacheContext } from 'ngx-cache-kit';

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);

  getUsers() {
    return this.http.get('/api/users', {
      context: cacheContext({
        tag: 'users-list', // for invalidation
        ttl: { value: 30, unit: 'minute' }, // optional override
      }),
    });
  }

  // Force refresh (ignore cache)
  refreshUsers() {
    return this.http.get('/api/users', {
      context: cacheContext({ cache: true, tag: 'users-list', overwrite: true }),
    });
  }

  // POST requests are cached too!
  createUser(data: any) {
    return this.http.post('/api/users', data, {
      context: cacheContext({ cache: true, tag: 'users-list' }),
    });
  }
}

3. Invalidate cache by tag

import { inject } from '@angular/core';
import { CacheService } from 'ngx-cache-kit';

const cache = inject(CacheService);

cache.deleteByTag('users-list'); // clear all users-related cache
cache.clearAll(); // nuke everything

Public API (only 2 things to remember!)

| Export | Purpose | | ------------------- | ---------------------------------------- | | provideCacheKit() | Setup + global config + auto interceptor | | cacheContext() | Attach cache behavior to any request |

Supported TTL formats

cacheContext({ ttl: 30_000 }); // milliseconds
cacheContext({ ttl: { value: 5, unit: 'minute' } });
cacheContext({ ttl: { value: 2, unit: 'hour' } });
cacheContext({ ttl: { value: 1, unit: 'day' } });

Why ngx-cache-kit?

| Feature | ngx-cache-kit | others | | --------------------------- | ------------- | ------------ | | One-liner setup | Yes | No | | Tag invalidation | Yes | Rare | | POST/PUT caching | Yes | Almost never | | Bundle size | ~3 KB | 8 – 30 KB | | No RxJS operators | Yes | No | | Angular 20+ fully supported | Yes | Warning |

License