@hapiness/ng-universal-transfer-http

TransferHttpCacheModule installs a Http interceptor that avoids duplicate HttpClient requests on the client

Stats

StarsIssuesVersionUpdatedCreatedSize
@hapiness/ng-universal-transfer-http
10.1.12 years ago4 years agoMinified + gzip package size for @hapiness/ng-universal-transfer-http in KB

Readme

Hapiness

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 @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));
});

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 '@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.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 '@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 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

  • v10.1.1 (2019-07-05)
    • Angular v8.1.0+
    • Fix cache problem when interceptor is initialized in client side without being in server side
    • Latest packages' versions
    • Documentation
  • v10.0.0 (2019-05-30)
    • Angular v8.0.0+
    • Latest packages' versions
    • Documentation
  • v9.0.0 (2018-10-31)
    • Angular v7.0.1+
    • Latest packages' versions
    • Documentation
  • v8.1.1 (2018-09-24)
    • Angular v6.1.8+
    • Fix typo
    • Latest packages' versions
    • Documentation
  • v8.1.0 (2018-07-26)
    • Angular v6.1.0+
    • Documentation
  • v8.0.2 (2018-05-25)
    • Angular v6.0.3+
    • Documentation
  • v8.0.1 (2018-05-13)
    • Angular v6.0.1+
    • Fix createHash method call for build process in Angular application with polyfills
    • Delete domContentLoadedFactory provider for universal rendering
    • Fix AOT build in Angular application with delete barrels
    • Documentation
  • v8.0.0 (2018-05-08)
    • Angular v6.0.0+
    • RxJS v6.1.0+
    • Change build process with to Angular-CLI library generation
    • Documentation

Back to top

Maintainers

tadaweb
Julien Fauville S├ębastien Ritz Nicolas Jessel

Back to top

License

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

Back to top

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.