Neoclassical Philosophic Musings

    @ngx-utils/cache
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.4 • Public • Published

    @ngx-utils/cache

    npm version npm downloads

    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 --save

    browser.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): boolean check if key exist in cache;
    • set(key: string, value: any): void put some value to cache;
    • get(key: string): any get value from cache by key;
    • clear(key: string): void remove value from cache by key;
    • clearAll(): void clear 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 }): void set 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)

    Install

    npm i @ngx-utils/cache

    DownloadsWeekly Downloads

    3

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    44.4 kB

    Total Files

    47

    Last publish

    Collaborators

    • avatar