{"id":20389362,"url":"https://github.com/ngx-utils/cache","last_synced_at":"2025-04-12T10:51:52.644Z","repository":{"id":57130805,"uuid":"95093803","full_name":"ngx-utils/cache","owner":"ngx-utils","description":"Service for transfer cached data from server","archived":false,"fork":false,"pushed_at":"2018-09-17T10:47:33.000Z","size":36,"stargazers_count":5,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T05:41:56.288Z","etag":null,"topics":["angular","angular-universal","angular4","cache"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ngx-utils.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-22T08:40:29.000Z","updated_at":"2022-07-04T10:09:18.000Z","dependencies_parsed_at":"2022-09-01T00:12:28.642Z","dependency_job_id":null,"html_url":"https://github.com/ngx-utils/cache","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-utils%2Fcache","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-utils%2Fcache/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-utils%2Fcache/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-utils%2Fcache/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngx-utils","download_url":"https://codeload.github.com/ngx-utils/cache/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248557844,"owners_count":21124165,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-universal","angular4","cache"],"created_at":"2024-11-15T03:17:49.202Z","updated_at":"2025-04-12T10:51:52.623Z","avatar_url":"https://github.com/ngx-utils.png","language":"TypeScript","readme":"# @ngx-utils/cache\n\n[![npm version](https://badge.fury.io/js/%40ngx-utils%2Fcache.svg)](https://badge.fury.io/js/%40ngx-utils%2Fcache) [![npm downloads](https://img.shields.io/npm/dm/@ngx-utils/cache.svg)](https://www.npmjs.com/package/@ngx-utils/cache)\n\nService for transfer cached data from server\n\nExample in [@ngx-utils/universal-starter](https://github.com/ngx-utils/universal-starter/blob/master/src/app/auth-http.service.ts#L19) shows the way in which `CacheService` is used to cache all requests performed on server side and get cached data on client side.\n\n## Table of contents:\n\n* [Prerequisites](#prerequisites)\n* [Getting started](#getting-started)\n  * [Installation](#installation)\n  * [browser.module.ts](#browsermodulets)\n  * [server.module.ts](#servermodulets)\n  * [Application cache key](#application-cache-key)\n* [API](#api)\n* [Example of usage](#example-of-usage)\n* [License](#license)\n\n## Prerequisites\n\nThis package depends on `@angular v5`.\n\nFor `@angular v4` use [2.0.1](https://github.com/ngx-utils/cache/tree/v2.0.1) version.\n\n## Getting started\n\n### Installation\n\nInstall **@ngx-utils/cache** from npm:\n\n```bash\nnpm install @ngx-utils/cache --save\n```\n\n### browser.module.ts\n\nAdd **BrowserCacheModule** to your browser module:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { BrowserCacheModule } from '@ngx-utils/cache/browser';\n...\nimport { AppModule } from './app/app.module';\nimport { AppComponent } from './app/app.component';\n...\n@NgModule({\n  imports: [\n    BrowserModule.withServerTransition({appId: 'your-app-id'}),\n    BrowserCacheModule.forRoot(),\n    AppModule\n    ...\n  ],\n  bootstrap: [AppComponent]\n})\nexport class BrowserAppModule { }\n```\n\n### server.module.ts\n\nAdd **ServerCacheModule** to your server module:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { ServerModule } from '@angular/platform-server';\nimport { ServerCacheModule } from '@ngx-utils/cache/server';\n...\nimport { AppModule } from './app/app.module';\nimport { AppComponent } from './app/app.component';\n...\n@NgModule({\n  imports: [\n    BrowserModule.withServerTransition({ appId: 'your-app-id' }),\n    ServerModule,\n    ServerCacheModule.forRoot(),\n    AppModule\n    ...\n  ],\n  bootstrap: [AppComponent]\n})\nexport class ServerAppModule { }\n```\n\n### Application cache key\n\nYou can also specify **application cache key**:\n\n```ts\nBrowserCacheModule.forRoot({ appCacheKey: 'YOUR_CACHE_KEY' })\n...\nServerCacheModule.forRoot({ appCacheKey: 'YOUR_CACHE_KEY' })\n```\n\nBy default this key is `__APP_CACHE__` and it used for create global variable (property in window object)\n\n## API\n\n`CacheService` has following methods:\n\n* `has(key: string): boolean` check if `key` exist in cache;\n* `set(key: string, value: any): void` put some value to cache;\n* `get(key: string): any` get value from cache by `key`;\n* `clear(key: string): void` remove value from cache by `key`;\n* `clearAll(): void` clear cache;\n* `dehydrate(): { [key: string]: any }` convert data from cache to JSON;\n* `toJSON(): { [key: string]: any }` convert data from cache to JSON;\n* `rehydrate(json: { [key: string]: any }): void` set data from JSON to cache;\n\n## Example of usage\n\nFollowing example shows how to cache all `GET` requests, performed on server side, and get cached data in browser (and don't send requests second time).\n\nFirst of all we need create interceptor:\n\n```ts\nimport { isPlatformBrowser, isPlatformServer } from '@angular/common';\nimport {\n  HttpEvent,\n  HttpHandler,\n  HttpInterceptor,\n  HttpRequest,\n  HttpResponse\n} from '@angular/common/http';\nimport { Inject, Injectable, PLATFORM_ID } from '@angular/core';\nimport { CacheService } from '@ngx-utils/cache';\nimport { Observable } from 'rxjs/Observable';\nimport { of } from 'rxjs/observable/of';\nimport { tap } from 'rxjs/operators/tap';\n\n@Injectable()\nexport class CacheInterceptor implements HttpInterceptor {\n  constructor(\n    private cache: CacheService,\n    @Inject(PLATFORM_ID) private platformId: Object\n  ) {}\n\n  intercept(\n    request: HttpRequest\u003cany\u003e,\n    next: HttpHandler\n  ): Observable\u003cHttpEvent\u003cany\u003e\u003e {\n    if (request.method !== 'GET') {\n      return next.handle(request);\n    }\n\n    if (\n      isPlatformBrowser(this.platformId) \u0026\u0026\n      this.cache.has(request.urlWithParams)\n    ) {\n      const response = new HttpResponse({\n        body: this.cache.get(request.urlWithParams),\n        status: 200\n      });\n      return of(response).pipe(\n        tap(() =\u003e this.cache.clear(request.urlWithParams))\n      );\n    }\n\n    return next.handle(request).pipe(\n      tap((response: any) =\u003e {\n        if (isPlatformServer(this.platformId)) {\n          this.cache.set(request.urlWithParams, response.body);\n        }\n      })\n    );\n  }\n}\n```\n\nThan import it to app's main module:\n\n```ts\nimport { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';\nimport { NgModule } from '@angular/core';\nimport { BrowserModule  } from '@angular/platform-browser';\n\nimport { AppComponent } from './app.component';\nimport { AppRoutingModule } from './app-routing.module';\nimport { CacheInterceptor } from './cache.interceptor';\n\n@NgModule({\n imports: [\n  BrowserModule,\n  HttpModule,\n  AppRoutingModule\n  ...\n ],\n declarations: [AppComponent],\n providers: [\n   {\n      provide: HTTP_INTERCEPTORS,\n      multi: true,\n      useClass: CacheInterceptor\n    }\n ]\n})\nexport class AppModule { }\n```\n\n## License\n\nThe MIT License (MIT)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngx-utils%2Fcache","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngx-utils%2Fcache","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngx-utils%2Fcache/lists"}