NG-Universal Transfer HTTP Cache Module

This module is an enhancement of original TransferHttpCacheModule from Angular Universal team. He allows to cache all type of requests and not just GET and/or HEAD.

It's written in full Observable with lettable versions.

Installation

$ yarn add @hapiness/ng-universal-transfer-http

or

$ npm install --save @hapiness/ng-universal-transfer-http

Usage

TransferHttpCacheModule installs a Http interceptor that avoids duplicate HttpClient requests on the client, for requests that were already made when the application was rendered on the server side.

When the module is installed in the application NgModule, it will intercept HttpClient requests on the server and store the response in the TransferState key-value store. This is transferred to the client, which then uses it to respond to the same HttpClient requests on the client.

To use the TransferHttpCacheModule just install it as part of the top-level App module.

src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TransferHttpCacheModule } from '@hapiness/ng-universal-transfer-http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // Add .withServerTransition() to support Universal rendering.
    // The application ID can be any identifier which is unique on
    // the page.
    BrowserModule.withServerTransition({ appId: 'ng-universal-example' }),
    // Add TransferHttpCacheModule to install a Http interceptor
    TransferHttpCacheModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

src/app/app.server.module.ts:

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    // The AppServerModule should import your AppModule followed
    // by the ServerModule from @angular/platform-server.
    AppModule,
    ServerModule,
    ModuleMapLoaderModule,
    ServerTransferStateModule
  ],
  // Since the bootstrapped component is not inherited from your
  // imported AppModule, it needs to be repeated here.
  bootstrap: [AppComponent]
})
export class AppServerModule {
}

src/main.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));
});

Development mode compatibility

If you want to have TransferHttpCacheModule installed and compatible with development mode, you must to declare it like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TransferHttpCacheModule } from '@hapiness/ng-universal-transfer-http';
import { environment } from '../environments/environment';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // Add .withServerTransition() to support Universal rendering.
    // The application ID can be any identifier which is unique on
    // the page.
    BrowserModule.withServerTransition({ appId: 'ng-universal-example' }),
    // Add TransferHttpCacheModule to install a Http interceptor and activate it only for production mode
    TransferHttpCacheModule.enableOnProdMode(environment.production)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Now, when you launch your application with ng serve all will work fine.

Change History

• v5.1.2 (2017-12-05)
  • Angular v5.0.5+
  • RxJS v5.5.3+
  • Documentation
• v5.1.1 (2017-12-01)
  • Angular v5.0.4+
  • Documentation
• v5.1.0 (2017-11-18)
  • Angular v5.0.2+
  • Development mode compatibility with enableOnProdMode() function
  • Documentation
• v5.0.0 (2017-11-13)
  • Angular v5.0.0+
  • Publish all features of the module
  • Lettable operators for RxJS
  • Documentation

Back to top

Maintainers

Julien Fauville	Antoine Gomez	Sébastien Ritz	Nicolas Jessel

Back to top

License

Copyright (c) 2017 Hapiness Licensed under the MIT license.

Back to top