ngx-universal-state-transfer

v0.4.0-beta.4

Published

4 years ago

State transferring utility for Angular Universal

0High
0Medium
0Low

theo-mathieu

state transfer platform-server universal angular

@ngx-universal/state-transfer

State transferring utility for Angular Universal

Please support this project by simply putting a Github star. Share this library with friends on Twitter and everywhere else you can.

Prerequisites

This package depends on @angular v4.0.0.

Also, please ensure that you are using Typescript v2.1.6 or higher.

Getting started

Installation

You can install @ngx-universal/state-transfer using npm

npm install @ngx-universal/state-transfer --save

Examples

ng-seed/universal is an officially maintained seed project, showcasing common patterns and best practices for @ngx-universal/state-transfer.

Related packages

The following packages may be used in conjunction with @ngx-universal/state-transfer:

Adding `@ngx-universal/state-transfer` to your project (SystemJS)

Add map for @ngx-universal/state-transfer in your systemjs.config

'@ngx-universal/state-transfer': 'node_modules/@ngx-universal/state-transfer/bundles/state-transfer.umd.min.js'

app.server.module configuration

Import ServerStateTransferModule using the mapping '@ngx-universal/state-transfer' and append ServerStateTransferModule.forRoot({...}) within the imports property of app.server.module (considering the app.server.module is the server module in Angular Universal application).

...
import { ServerStateTransferModule, StateTransferService } from '@ngx-universal/state-transfer';
...

@NgModule({
  imports: [
    BrowserModule.withServerTransition({
      appId: 'my-app-id'
    }),
    ServerModule,
    ServerStateTransferModule.forRoot(),
    AppModule
  ],
  ...
  bootstrap: [AppComponent]
})
export class AppServerModule {
  constructor(private readonly stateTransfer: StateTransferService) {
  }

  ngOnBootstrap = () => {
    this.stateTransfer.set('test_key', JSON.stringify({'value': 'test'}));
    this.stateTransfer.inject();
  }
}

app.browser.module configuration

Import BrowserStateTransferModule using the mapping '@ngx-universal/state-transfer' and append BrowserStateTransferModule.forRoot({...}) within the imports property of app.browser.module (considering the app.browser.module is the browser module in Angular Universal application).

...
import { BrowserStateTransferModule } from '@ngx-universal/state-transfer';
...

@NgModule({
  imports: [
    BrowserModule.withServerTransition({
      appId: 'my-app-id'
    }),
    BrowserStateTransferModule.forRoot(),
    AppModule
  ],
  ...
  bootstrap: [LayoutMainComponent]
})
export class AppBrowserModule {
}

app.module configuration

Import HttpTransferModule using the mapping '@ngx-universal/state-transfer' and append HttpTransferModule.forRoot({...}) within the imports property of app.module (considering the app.module is the core module in Angular application).

...
import { HttpTransferModule } from '@ngx-universal/state-transfer';
...

@NgModule({
  imports: [
    BrowserModule,
    HttpTransferModule.forRoot(),
    ...
  ],
  ...
  bootstrap: [AppComponent]
})
export class AppModule {
  ...
}

:+1: So good! @ngx-universal/state-transfer will now transfer the state from the server platform to the browser platform.

Usage

StateTransferService has the following methods:

initialize(state: Map<string, any>): initializes the STATE using an existing Map<string, any>
get(key: string): gets some object from STATE, by key
set(key: string, value: any): puts some object to STATE
inject(): injects the STATE inside a <script> block (between the <head>...</head> tags)

The following example shows how to read the STATE value transferred from the server platform to the browser platform, using the configuration above.

app.browser.module

...
import { BrowserStateTransferModule, DEFAULT_STATE_ID } from '@ngx-universal/state-transfer';
...

@NgModule({
  imports: [
    BrowserModule.withServerTransition({
      appId: 'my-app-id'
    }),
    BrowserStateTransferModule.forRoot(),
    AppModule
  ],
  ...
  bootstrap: [LayoutMainComponent]
})
export class AppBrowserModule {
  constructor() {
    // get `STATE` value (injected by the server platform)
    let stateValue = undefined;
    
    const win: any = window;
    
    if (!!win && !!win[DEFAULT_STATE_ID])
      stateValue = win[DEFAULT_STATE_ID];
    
    // do something with the value acquired
    // whatever you want ...
  }
}

License

The MIT License (MIT)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme