{"_id":"@akanass/ng-universal-transfer-http","_rev":"1-66f8c50853f067023f7e310a11dc4c7f","name":"@akanass/ng-universal-transfer-http","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@akanass/ng-universal-transfer-http","version":"1.0.0","description":"TransferHttpCacheModule installs a Http interceptor that avoids duplicate HttpClient requests on the client","repository":{"type":"git","url":"git+ssh://git@github.com/akanass/ng-universal-transfer-http.git"},"keywords":["Angular","Library","Server","Transfer","HTTP","Cache","Module","AOT","JIT"],"contributors":[{"name":"Nicolas Jessel","url":"https://github.com/akanass"}],"license":"MIT","bugs":{"url":"https://github.com/akanass/ng-universal-transfer-http/issues"},"homepage":"https://github.com/akanass/ng-universal-transfer-http#readme","dependencies":{"flatted":"^2.0.1","create-hash":"^1.2.0","stream-browserify":"^2.0.2","tslib":"^1.9.0"},"peerDependencies":{"@angular/common":"^8.1.2","@angular/core":"^8.1.2","@angular/platform-browser":"^8.1.2","rxjs":"^6.5.2"},"engines":{"node":">=7.0.0"},"main":"bundles/akanass-ng-universal-transfer-http.umd.js","module":"fesm5/akanass-ng-universal-transfer-http.js","es2015":"fesm2015/akanass-ng-universal-transfer-http.js","esm5":"esm5/akanass-ng-universal-transfer-http.js","esm2015":"esm2015/akanass-ng-universal-transfer-http.js","fesm5":"fesm5/akanass-ng-universal-transfer-http.js","fesm2015":"fesm2015/akanass-ng-universal-transfer-http.js","typings":"akanass-ng-universal-transfer-http.d.ts","metadata":"akanass-ng-universal-transfer-http.metadata.json","sideEffects":false,"_id":"@akanass/ng-universal-transfer-http@1.0.0","_nodeVersion":"12.6.0","_npmVersion":"6.10.1","dist":{"integrity":"sha512-ZU89yKxQupct6m2fhTpjsQYtsjPRvJ/C0V2osL1kFdvvaNOY7kvJzBwxEqUTWJF76+i4aR4qCAV1ReKLis+RGg==","shasum":"ee74269b7a294eb06c837ae0011bb1078a2b9fbd","tarball":"https://registry.npmjs.org/@akanass/ng-universal-transfer-http/-/ng-universal-transfer-http-1.0.0.tgz","fileCount":32,"unpackedSize":477105,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMHOBCRA9TVsSAnZWagAAczYP/0g6UMgnlNP9g6NTpWC5\nkTyLqSWgI51+MQkHQNgVDRJ1Cet2HClLXEaOkbOG6xIJHGRe/bpMPAI5C5hT\n3qCxh8DH7ujqLsfyBkphKDQLpyyDoQMHeTbYG1ItB0vPJUEXNyL05W6F02qI\nnG2LvT/+HqSzRy2VqTFAibYU6p9uCLcGnoDYvMQ9QvPajho7PFB60mzPc9eF\nFKEi+rZ6u7UHDVRGZHIvGmhkcKPu4/52cj1mogPMQ4XerUGD7ZdFj8bYKqsp\ngI0zee6n9Rd81jnfipNVXn12IE5yyogwpG17nBrol+ZMtxCCDu6qnTb304IL\nmuL9MifVkhlQOOQO5udw2oTlqhnAP6u7zWsjWFno5nsUy0EdOjx68FbPbtyP\nfniXGH3XNyNA1gN07Ybda79GJAGOhbPDwJSB/2GUTvC2aICmhFx3x0lQmB59\nfUcUrbsusuQ7hvAEsDLFpAnBoMDIWBkO9F/7tssSaA21ved81U9Ot9lj9RKQ\nt5PsXeWUpwvhVQuprVVrYz4DsMAipazW6PHZAV1zCaN8o7+2Ry9WwBw5oT/U\nl7jgwE2Hv3EfY7QNFUUxDJvK5giUwU3mBjPcHP9n3UPjP81GAMVZ5UDAUN2s\nXrkb7A1IAUG6uAovqnojft5CEcuM1+eUVklW4+EzJq1G0HtelGYvRzNh59L7\nJg9L\r\n=Bemj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFbZ1jb7PslGt0xeWYBA3HWd7Tqa/55n/p334jR3WdaJAiEA5v/gi0dENrkwkKQQ7HmdkvexFpSNTpKm/v4VZCEgda0="}]},"maintainers":[{"name":"akanass","email":"akanass@icloud.com"}],"_npmUser":{"name":"akanass","email":"akanass@icloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-universal-transfer-http_1.0.0_1563456385276_0.531453966499833"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-18T13:26:25.062Z","1.0.0":"2019-07-18T13:26:25.416Z","modified":"2022-04-04T12:27:56.320Z"},"maintainers":[{"name":"akanass","email":"akanass@icloud.com"}],"description":"TransferHttpCacheModule installs a Http interceptor that avoids duplicate HttpClient requests on the client","homepage":"https://github.com/akanass/ng-universal-transfer-http#readme","keywords":["Angular","Library","Server","Transfer","HTTP","Cache","Module","AOT","JIT"],"repository":{"type":"git","url":"git+ssh://git@github.com/akanass/ng-universal-transfer-http.git"},"contributors":[{"name":"Nicolas Jessel","url":"https://github.com/akanass"}],"bugs":{"url":"https://github.com/akanass/ng-universal-transfer-http/issues"},"license":"MIT","readme":"
\n
\n \n \"build\"\n \n \n \"dependencies\"\n \n \n \"devDependencies\"\n \n
\n
\n \n \"Typescript\n \n \n \"ReactiveX\n \n \n \"Angular\n \n
\n
\n\n# NG-Universal Transfer HTTP Cache Module\n\nThis module is an enhancement of original [`TransferHttpCacheModule`](https://github.com/angular/universal/blob/master/modules/common) from `Angular Universal` team. He allows to cache **all type of requests** and not just `GET` and/or `HEAD`.\n\nIt's written in full `RxJS` v6.5.2+\n\n## Installation\n\n```bash\n$ yarn add @akanass/ng-universal-transfer-http\n\nor\n\n$ npm install --save @akanass/ng-universal-transfer-http\n```\n\n## Usage\n\n`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.\n\nWhen 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.\n\nTo use the `TransferHttpCacheModule` just install it as part of the top-level App module.\n\n### src/app/app.module.ts:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { TransferHttpCacheModule } from '@akanass/ng-universal-transfer-http';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n // Add .withServerTransition() to support Universal rendering.\n // The application ID can be any identifier which is unique on\n // the page.\n BrowserModule.withServerTransition({ appId: 'ng-universal-example' }),\n // Add TransferHttpCacheModule to install a Http interceptor\n TransferHttpCacheModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n### src/app/app.server.module.ts:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { ServerModule, ServerTransferStateModule } from '@angular/platform-server';\nimport { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';\n\nimport { AppModule } from './app.module';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n imports: [\n // The AppServerModule should import your AppModule followed\n // by the ServerModule from @angular/platform-server.\n AppModule,\n ServerModule,\n ModuleMapLoaderModule,\n ServerTransferStateModule\n ],\n // Since the bootstrapped component is not inherited from your\n // imported AppModule, it needs to be repeated here.\n bootstrap: [AppComponent]\n})\nexport class AppServerModule {\n}\n```\n\n### src/main.ts:\n\n```typescript\nimport { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n enableProdMode();\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n platformBrowserDynamic().bootstrapModule(AppModule)\n .catch(err => console.log(err));\n});\n```\n\n### Polyfills:\n\nTo create the storage key, we use [`create-hash`](https://github.com/crypto-browserify/createHash) module but `Angular-CLI` v6+ disable all `node` modules in **browser** builds so we must specify all polyfills manually.\n\nAdd in `tsconfig.app.json` the path to `stream` browser version:\n\n```json\n{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/app\",\n \"types\": [],\n \"paths\": {\n \"stream\": [\n \"node_modules/stream-browserify\"\n ]\n }\n },\n \"include\": [\n \"src/**/*.ts\"\n ],\n \"exclude\": [\n \"src/test.ts\",\n \"src/**/*.spec.ts\"\n ]\n}\n```\n\nAdd at the end of `src/polyfills.ts` all required node modules polyfills:\n\n```typescript\n(window as any).global = window;\n(window as any).process = require('process');\n(window as any).Buffer = require('buffer').Buffer;\n```\n\n## Development mode compatibility\n\nIf you want to have `TransferHttpCacheModule` installed and compatible with `development` mode, you must to declare it like this:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { TransferHttpCacheModule } from '@akanass/ng-universal-transfer-http';\nimport { environment } from '../environments/environment';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n // Add .withServerTransition() to support Universal rendering.\n // The application ID can be any identifier which is unique on\n // the page.\n BrowserModule.withServerTransition({ appId: 'ng-universal-example' }),\n // Add TransferHttpCacheModule to install a Http interceptor and activate it only for production mode\n TransferHttpCacheModule.withConfig({prodMode: environment.production})\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nNow, when you launch your application with `ng serve` all will work fine.\n\n\n## Change URL for storage's key\n\nSometimes, 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.\n\nTo solve it, we add an option and you must to declare it like this:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { TransferHttpCacheModule } from '@akanass/ng-universal-transfer-http';\nimport { environment } from '../environments/environment';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n // Add .withServerTransition() to support Universal rendering.\n // The application ID can be any identifier which is unique on\n // the page.\n BrowserModule.withServerTransition({ appId: 'ng-universal-example' }),\n // Add TransferHttpCacheModule to install a Http interceptor and change in storage's key generation with value of header\n TransferHttpCacheModule.withConfig({headerNameToOverrideUrlInKeyCachingGeneration: 'x-url-header-storage-key'})\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nThis option is compatible with `prodMode` option.\n\n## Change History\n* v1.0.0 (2019-07-12)\n * `Angular v8.1.2+`\n * Original implementation\n * Documentation\n\n[Back to top](#installation)\n\n## License\n\nCopyright (c) 2019 **Nicolas Jessel** Licensed under the [MIT license](https://github.com/akanass/ng-universal-transfer-http/blob/master/LICENSE.md).\n\n[Back to top](#installation)\n","readmeFilename":"README.md"}