diff --git a/README.md b/README.md index 7894b3f..1a9c348 100644 --- a/README.md +++ b/README.md @@ -5,10 +5,10 @@ The project contains: 1. Three publishable libraries: - - `@ngx-ssr/cache` - in-memory implementation of the cache for GET requests and HTML. It is possible to change the + - [@ngx-ssr/cache](./libs/ngx-ssr/cache/README.md) - in-memory implementation of the cache for GET requests and HTML. It is possible to change the storage. - - `@ngx-ssr/timeout` — implementation of timeout for requests - - `@ngx-ssr/platform` — utilities for convenient work with platform-specific data + - [@ngx-ssr/timeout](./libs/ngx-ssr/timeout/README.md) — implementation of timeout for requests + - [@ngx-ssr/platform](./libs/ngx-ssr/platform/README.md) — utilities for convenient work with platform-specific data 2. One side publishable library: - `ngx-rickandmorty` 3. [The Rick and Morty application](https://ng-rickandmorty.web.app/character) based on the Rick and Morty API. The @@ -18,121 +18,3 @@ The project contains: All developed libraries are used in the application. [Taiga UI](https://taiga-ui.dev/) is used as a UI framework. - -# How to use - -## @ngx-ssr/cache - -Install package - -```bash -npm i @ngx-ssr/cache -``` - -Import the `NgxSsrCacheModule` module to cache all GET requests - -```ts -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { AppComponent } from './app.component'; -import { NgxSsrCacheModule } from '@ngx-ssr/cache'; -import { environment } from '../environments/environment'; - -@NgModule({ - declarations: [AppComponent], - imports: [ - BrowserModule, - NgxSsrCacheModule.configLruCache({ maxAge: 10 * 60_000, maxSize: 50 }), - ], - bootstrap: [AppComponent], -}) -export class AppModule { -} -``` - -HTML caching is also available for express - -```ts -import { ngExpressEngine } from '@nguniversal/express-engine'; -import { LRUCache } from '@ngx-ssr/cache'; -import { withCache } from '@ngx-ssr/cache/express'; - -server.engine( - 'html', - withCache( - new LRUCache({ maxAge: 10 * 60_000, maxSize: 100 }), - ngExpressEngine({ - bootstrap: AppServerModule, - }) - ) -); -``` - -## @ngx-ssr/timeout - -Install package - -```bash -npm i @ngx-ssr/timeout -``` - -Use `NgxSsrTimeoutModule` to set timeouts for all requests - -```ts -import { NgModule } from '@angular/core'; -import { - ServerModule, -} from '@angular/platform-server'; -import { AppModule } from './app.module'; -import { AppComponent } from './app.component'; -import { NgxSsrTimeoutModule } from '@ngx-ssr/timeout'; - -@NgModule({ - imports: [ - AppModule, - ServerModule, - NgxSsrTimeoutModule.forRoot({ timeout: 500 }), - ], - bootstrap: [AppComponent], -}) -export class AppServerModule { -} -``` - -## @ngx-ssr/platform - -Install package - -```bash -npm i @ngx-ssr/platform -``` - -To determine the platform, use the tokens `IS_SERVER_PLATFORM` and `IS_BROWSER_PLATFORM` - -```ts -@Directive({ - selector: '[some-directive]', -}) -export class SomeDirective { - constructor( - @Inject(IS_SERVER_PLATFORM) isServer: boolean, - ) { - if (isServer) { - viewContainer.createEmbeddedView(templateRef); - } - } -} -``` - -Use the `ifIsServer` and ` ifIsBrowser` structural directives in your template for rendering contents depending on the -platform: - -```ts -@Component({ - selector: 'ram-root', - template: '', - styleUrls: ['./app.component.less'], -}) -export class AppComponent { -} -``` diff --git a/libs/ngx-ssr/cache/README.md b/libs/ngx-ssr/cache/README.md index 04f499b..3075de8 100644 --- a/libs/ngx-ssr/cache/README.md +++ b/libs/ngx-ssr/cache/README.md @@ -1 +1,46 @@ # @ngx-ssr/cache + +Install package + +```bash +npm i @ngx-ssr/cache +``` + +Import the `NgxSsrCacheModule` module to cache all GET requests + +```ts +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; +import { AppComponent } from './app.component'; +import { NgxSsrCacheModule } from '@ngx-ssr/cache'; +import { environment } from '../environments/environment'; + +@NgModule({ + declarations: [AppComponent], + imports: [ + BrowserModule, + NgxSsrCacheModule.configLruCache({ maxAge: 10 * 60_000, maxSize: 50 }), + ], + bootstrap: [AppComponent], +}) +export class AppModule { +} +``` + +HTML caching is also available for express + +```ts +import { ngExpressEngine } from '@nguniversal/express-engine'; +import { LRUCache } from '@ngx-ssr/cache'; +import { withCache } from '@ngx-ssr/cache/express'; + +server.engine( + 'html', + withCache( + new LRUCache({ maxAge: 10 * 60_000, maxSize: 100 }), + ngExpressEngine({ + bootstrap: AppServerModule, + }) + ) +); +``` diff --git a/libs/ngx-ssr/platform/README.md b/libs/ngx-ssr/platform/README.md index 5e9e3d8..4ace994 100644 --- a/libs/ngx-ssr/platform/README.md +++ b/libs/ngx-ssr/platform/README.md @@ -1 +1,37 @@ # @ngx-ssr/platform + +Install package + +```bash +npm i @ngx-ssr/platform +``` + +To determine the platform, use the tokens `IS_SERVER_PLATFORM` and `IS_BROWSER_PLATFORM` + +```ts +@Directive({ + selector: '[some-directive]', +}) +export class SomeDirective { + constructor( + @Inject(IS_SERVER_PLATFORM) isServer: boolean, + ) { + if (isServer) { + viewContainer.createEmbeddedView(templateRef); + } + } +} +``` + +Use the `ifIsServer` and ` ifIsBrowser` structural directives in your template for rendering contents depending on the +platform: + +```ts +@Component({ + selector: 'ram-root', + template: '', + styleUrls: ['./app.component.less'], +}) +export class AppComponent { +} +``` diff --git a/libs/ngx-ssr/timeout/README.md b/libs/ngx-ssr/timeout/README.md index b790295..77de2bb 100644 --- a/libs/ngx-ssr/timeout/README.md +++ b/libs/ngx-ssr/timeout/README.md @@ -1 +1,29 @@ -# @ngx-ssr/timeout + +Install package + +```bash +npm i @ngx-ssr/timeout +``` + +Use `NgxSsrTimeoutModule` to set timeouts for all requests + +```ts +import { NgModule } from '@angular/core'; +import { + ServerModule, +} from '@angular/platform-server'; +import { AppModule } from './app.module'; +import { AppComponent } from './app.component'; +import { NgxSsrTimeoutModule } from '@ngx-ssr/timeout'; + +@NgModule({ + imports: [ + AppModule, + ServerModule, + NgxSsrTimeoutModule.forRoot({ timeout: 500 }), + ], + bootstrap: [AppComponent], +}) +export class AppServerModule { +} +```