@akanass/ng-universal-transfer-http

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 RxJS v6.5.2+

Installation

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

or

$ npm install --save @akanass/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 '@akanass/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));
});

Polyfills:

To create the storage key, we use create-hash module but Angular-CLI v6+ disable all node modules in browser builds so we must specify all polyfills manually.

Add in tsconfig.app.json the path to stream browser version:

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./out-tsc/app",
        "types": [],
        "paths": {
            "stream": [
                "node_modules/stream-browserify"
            ]
        }
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "src/test.ts",
        "src/**/*.spec.ts"
    ]
}

Add at the end of src/polyfills.ts all required node modules polyfills:

(window as any).global = window;
(window as any).process = require('process');
(window as any).Buffer = require('buffer').Buffer;

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 '@akanass/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.withConfig({prodMode: environment.production})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

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

Change URL for storage's key

Sometimes, when you're in server side rendering, you're in internal environment and calls have not the same scheme (https for client calls and http for server calls) or not the same url (public url for client and private url for server) so when you come back in browser, request are not cached if you don't have the same url in storage's key generation.

To solve it, we add an option and you must to declare it like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TransferHttpCacheModule } from '@akanass/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 change in storage's key generation with value of header
    TransferHttpCacheModule.withConfig({headerNameToOverrideUrlInKeyCachingGeneration: 'x-url-header-storage-key'})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

This option is compatible with prodMode option.

Change History

• v1.0.0 (2019-07-12)
  • Angular v8.1.2+
  • Original implementation
  • Documentation

Back to top

License

Copyright (c) 2019 Nicolas Jessel Licensed under the MIT license.

Back to top