ngx-universal-state-transfer
Advanced tools
State transferring utility for Angular Universal
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.
This package depends on @angular v4.0.0.
Also, please ensure that you are using Typescript v2.1.6 or higher.
You can install @ngx-universal/state-transfer using npm
npm install @ngx-universal/state-transfer --save
@ngx-universal/state-transfer.The following packages may be used in conjunction with @ngx-universal/state-transfer:
@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'
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();
}
}
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 {
}
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-transferwill now transfer the state from the server platform to the browser platform.
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 keyset(key: string, value: any): puts some object to STATEinject(): 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.
...
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 ...
}
}
The MIT License (MIT)
Copyright (c) 2017 Burak Tasci
FAQs
State transferring utility for Angular Universal
The npm package ngx-universal-state-transfer receives a total of 1 weekly downloads. As such, ngx-universal-state-transfer popularity was classified as not popular.
We found that ngx-universal-state-transfer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.