**The cleanest, most powerful HTTP caching solution for modern Angular**
npm install ngx-cache-kitThe 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



``bash`
npm install ngx-cache-kit
`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!
],
};
`
`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' }),
});
}
}
`
`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
`
| Export | Purpose |
| ------------------- | ---------------------------------------- |
| provideCacheKit() | Setup + global config + auto interceptor |cacheContext()
| | Attach cache behavior to any request |
`ts``
cacheContext({ ttl: 30_000 }); // milliseconds
cacheContext({ ttl: { value: 5, unit: 'minute' } });
cacheContext({ ttl: { value: 2, unit: 'hour' } });
cacheContext({ ttl: { value: 1, unit: 'day' } });
| 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 |
---