Create Universal Storage module

we should allow users to use localStorage both in server/client

@gdi2290

@gdi2290 as this has been taken off of the Beta.0 milestone, do you have a vision for when angular universal will offer localStorage support? Thank you in advance

I'm introducing a Universal Cache service that will be used in localStorage after the initial rc6 release

@gdi2290

@gdi2290 For now localStorage is not accepted in my Universal app (everything else is working) and crashes the server, is there something special to import or is it not ready yet ?

@cyrilletuzi

@cyrilletuzi to transfer state from the server to the client you can use a lifecycle hook in Node and the helper flags isBrowser and isNode
main.browser.ts

import { isBrowser, isNode } from 'angular2-universal';

@NgModule({
  bootstrap: [ App ],
  declarations: [ App, Home ],
  imports: [
    UniversalModule, // BrowserModule, HttpModule, and JsonpModule are included
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: Home, pathMatch: 'full' }
    ])
  ]
})
export class MainModule {
  constructor(public appRef: ApplicationRef) {
    // lives in your browser main module
    var key = 'yourServiceWithState._state'
    if (UNIVERSAL_CACHE[key]) {
      localStorage[key] = UNIVERSAL_CACHE[key]
    }
  }

}

main.node.ts

import { isBrowser, isNode } from 'angular2-universal';

@NgModule({
  bootstrap: [ App ],
  declarations: [ App, Home ],
  imports: [
    UniversalModule, // BrowserModule, HttpModule, and JsonpModule are included
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: Home, pathMatch: 'full' }
    ])
  ]
})
export class MainModule {
  constructor(public appRef: ApplicationRef) {

  }
  // lives in your node main module
  universalDoDehydrate(universalCache) {
    var yourServiceWithState = this.appRef.injector.get(YourServiceWithState)
    var key = 'yourServiceWithState._state'
    universalCache[key] = yourServiceWithState._state.justOneProp
  }
}

or if you're using the same entry file then it's

import { isBrowser, isNode } from 'angular2-universal';

@NgModule({
  bootstrap: [ App ],
  declarations: [ App, Home ],
  imports: [
    UniversalModule, // BrowserModule, HttpModule, and JsonpModule are included
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: Home, pathMatch: 'full' }
    ])
  ]
})
export class MainModule {
  constructor(public appRef: ApplicationRef) {
    // lives in your browser main module
    if (isBrowser) {
     var key = 'yourServiceWithState._state'
      if (UNIVERSAL_CACHE[key]) {
        localStorage[key] = UNIVERSAL_CACHE[key]
      }
    }
  }
  // lives in your node main module
  universalDoDehydrate(universalCache) {
    var yourServiceWithState = this.appRef.injector.get(YourServiceWithState)
    var key = 'yourServiceWithState._state'
    universalCache[key] = yourServiceWithState._state.justOneProp
  }
}

after I create universal lifecycle hooks for the client then this will be more seamless

@gdi2290

@gdi2290 where does UNIVERSAL_CACHE come from? I am running ^2.0.11

to transfer state from client to server you can simply make an http call

It sounds like you need some initial logic the moment before the app gets serialized, or during, so that it can decide what route to instead render, or components to show,etc ?

What are you trying now?

@WWelling

@WWelling Which file were you trying to do it, let me take a look so I can see what you need.

Is everything working or are you worried about security with this? No worries! Sorry if I'm slow to respond, I've been trying to tackle of a few things at once, it's hard to find time for everything :)

won't be supported officially
angular/angular#13822

@gdi2290

This solution not working for me @gdi2290 @CL0SeY could you help:

http://stackoverflow.com/questions/43350949/how-to-store-token-on-server-side-angular-universal

I made it :)

Have a look at ng-seed/universal for its usage.

Quoted from fulls1z3/universal#5

Check the implementation: just updated this repo as well as publishing 4 separate packages for cache operations both on server and browser platforms. Everything is handled via the @Cached(...) decorator on the method/loader/etc which you want it cached. Also, there's the possibility to use caching methods (has, get, set) using the caching API.

ngx-cache/core: cache utility

ngx-cache/platform-browser: browser platform implementation

ngx-cache/platform-server: server platform implementation

ngx-cache/fs-storage: fs-storage for server platform

You might ask why to keep the structure so complex and consume 4 different packages? The answer is, not all the use cases depend on caching on the server platform. Furthermore, this structure allows to integrate any kind of custom caching with the server or browser platform (ex: session, api, etc).

Currently there's no documentation available for these packages, because these days I'm kinda overloaded with many different tasks/projects. I think in a week or two I'll try to provide a good documentation as well as unit tests for these packages.

However, try to have a look on this repo - about the use of CacheService and its instruments. I think it won't be difficult to understand the concepts, as I've kept the code style as DRY as possible.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

Create Universal Storage module #272

6 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Create Universal Storage module #272

Description

Activity

zcoon commented on Sep 13, 2016

PatrickJS commented on Sep 13, 2016

cyrilletuzi commented on Sep 16, 2016

PatrickJS commented on Sep 16, 2016

PatrickJS commented on Sep 16, 2016

joshmvandercom commented on Oct 3, 2016

6 remaining items

PatrickJS commented on Dec 5, 2016

MarkPieszak commented on Dec 9, 2016

MarkPieszak commented on Dec 13, 2016

MarkPieszak commented on Dec 13, 2016

PatrickJS commented on Jan 8, 2017

vforv commented on Apr 11, 2017

fulls1z3 commented on Apr 14, 2017

angular-automatic-lock-bot commented on Sep 4, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions