@ngx-utils/cache
Service for transfer cached data from server
Example in @ngx-utils/universal-starter shows the way in which CacheService is used to cache all requests performed on server side and get cached data on client side.
Table of contents:
Prerequisites
This package depends on @angular v5.
For @angular v4 use 2.0.1 version.
Getting started
Installation
Install @ngx-utils/cache from npm:
npm install @ngx-utils/cache --savebrowser.module.ts
Add BrowserCacheModule to your browser module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserCacheModule } from '@ngx-utils/cache/browser';
...
import { AppModule } from './app/app.module';
import { AppComponent } from './app/app.component';
...
@NgModule({
imports: [
BrowserModule.withServerTransition({appId: 'your-app-id'}),
BrowserCacheModule.forRoot(),
AppModule
...
],
bootstrap: [AppComponent]
})
export class BrowserAppModule { }server.module.ts
Add ServerCacheModule to your server module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ServerModule } from '@angular/platform-server';
import { ServerCacheModule } from '@ngx-utils/cache/server';
...
import { AppModule } from './app/app.module';
import { AppComponent } from './app/app.component';
...
@NgModule({
imports: [
BrowserModule.withServerTransition({ appId: 'your-app-id' }),
ServerModule,
ServerCacheModule.forRoot(),
AppModule
...
],
bootstrap: [AppComponent]
})
export class ServerAppModule { }Application cache key
You can also specify application cache key:
BrowserCacheModule.forRoot({ appCacheKey: 'YOUR_CACHE_KEY' })
...
ServerCacheModule.forRoot({ appCacheKey: 'YOUR_CACHE_KEY' })By default this key is __APP_CACHE__ and it used for create global variable (property in window object)
API
CacheService has following methods:
-
has(key: string): booleancheck ifkeyexist in cache; -
set(key: string, value: any): voidput some value to cache; -
get(key: string): anyget value from cache bykey; -
clear(key: string): voidremove value from cache bykey; -
clearAll(): voidclear cache; -
dehydrate(): { [key: string]: any }convert data from cache to JSON; -
toJSON(): { [key: string]: any }convert data from cache to JSON; -
rehydrate(json: { [key: string]: any }): voidset data from JSON to cache;
Example of usage
Following example shows how to cache all GET requests, performed on server side, and get cached data in browser (and don't send requests second time).
First of all we need create interceptor:
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import {
HttpEvent,
HttpHandler,
HttpInterceptor,
HttpRequest,
HttpResponse
} from '@angular/common/http';
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { CacheService } from '@ngx-utils/cache';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { tap } from 'rxjs/operators/tap';
@Injectable()
export class CacheInterceptor implements HttpInterceptor {
constructor(
private cache: CacheService,
@Inject(PLATFORM_ID) private platformId: Object
) {}
intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
if (request.method !== 'GET') {
return next.handle(request);
}
if (
isPlatformBrowser(this.platformId) &&
this.cache.has(request.urlWithParams)
) {
const response = new HttpResponse({
body: this.cache.get(request.urlWithParams),
status: 200
});
return of(response).pipe(
tap(() => this.cache.clear(request.urlWithParams))
);
}
return next.handle(request).pipe(
tap((response: any) => {
if (isPlatformServer(this.platformId)) {
this.cache.set(request.urlWithParams, response.body);
}
})
);
}
}Than import it to app's main module:
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { CacheInterceptor } from './cache.interceptor';
@NgModule({
imports: [
BrowserModule,
HttpModule,
AppRoutingModule
...
],
declarations: [AppComponent],
providers: [
{
provide: HTTP_INTERCEPTORS,
multi: true,
useClass: CacheInterceptor
}
]
})
export class AppModule { }License
The MIT License (MIT)