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 inAngular
application with polyfills - Delete
domContentLoadedFactory
provider for universal rendering - Fix
AOT
build inAngular
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
Maintainers
Julien Fauville | Sébastien Ritz | Nicolas Jessel |
License
Copyright (c) 2019 Hapiness Licensed under the MIT license.