Noticeably Playful Monkeys

    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published


    Configurable caching of HTTP requests in Angular.

    npm version

    Table of contents


    For a demo, download the repository, install NPM packages, then run the following commands:

    npm run start:api
    npm run watch:lib
    npm start

    The first command will start a fake API that is used to make HTTP calls to, the second will compile ngx-http-request-cache, the third command will open a demo site that shows this working.


    Install ngx-http-request-cache via NPM, using the command below.


    npm install --save ngx-http-request-cache

    Getting started

    Import the NgxHttpRequestModule in your root application module:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { NgxHttpRequestModule } from 'ngx-http-request-cache';
      imports: [
    export class AppModule { }

    You can either pass a personalised config into forRoot or leave the method call empty to use the defaults. Options listed below.


    Option Type Options Default Use
    behavior NgxHttpRequestBehavior [NgxHttpRequestBehavior.None, NgxHttpRequestBehavior.All, NgxHttpRequestBehavior.PageLevel] NgxHttpRequestBehavior.None Used to define the behavior that all HTTP requests should be sent with.
    localStorage boolean false Whether or not to store the cached results in localStorage. If this is set then the results will only be stored until the application is reloaded, or the page is refreshed depending on the type of behavior chosen (see below).
    methods NgxHttpRequestMethod[] [NgxHttpRequestMethod.Delete, NgxHttpRequestMethod.Get, NgxHttpRequestMethod.Head, NgxHttpRequestMethod.Jsonp, NgxHttpRequestMethod.Options, NgxHttpRequestMethod.Patch, NgxHttpRequestMethod.Post, NgxHttpRequestMethod.Put] [NgxHttpRequestMethod.Get] The HTTP request types that should have hte default behavior applied to them.


    1. None - This means that no requests will be cached
    2. All - This means that all requests will be cached
    3. PageLevel - This means that all requests will be cached until the URL changes.


    You can also customise the behavior per request.

    let headers = new HttpHeaders();
    // Change the behavior for this request specifically
    // Can choose from any of the available behaviors
    headers = headers.append(NgxHttpRequestHeaders.Cache, NgxHttpRequestBehavior);
    // State that the result for this particular should be stored in local storage
    headers = headers.append(NgxHttpRequestHeaders.LocalStorage, 'true');
    // If this header is provided then this means that any existing cached value will be replaced
    headers = headers.append(NgxHttpRequestHeaders.Replace, '');
    this.http.get<any[]>('http://localhost:3000/users', { headers: headers });


    1. Add timed caching
    2. If cache exists for a lower/higher level make it configurable to use it.


    npm i ngx-http-request-cache

    DownloadsWeekly Downloads






    Unpacked Size

    123 kB

    Total Files


    Last publish


    • wardie93