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

``bash
npm install ngx-cache-kit
`

1. Enable cache globally (just ONE line!)

`ts
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

`ts
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

`ts
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

`ts
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

---