@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.
Table of contents:
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 { ...}👍 So good!
@ngx-universal/state-transferwill now transfer the state from the server platform to the browser platform.
Usage
StateTransferService has the following methods:
initialize(state: Map<string, any>): initializes theSTATEusing an existingMap<string, any>get(key: string): gets some object fromSTATE, by keyset(key: string, value: any): puts some object toSTATEinject(): injects theSTATEinside 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)
Copyright (c) 2017 Burak Tasci