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 4 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.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.