Universal support

[kadosh1000]

Hi,
It seems that the package does not support universal.
I am using universal for SEO, and it is part of angular since version 4.0.0

Are there any plans to support it?

[DanielKucal]

Hi @kadosh1000, what is the exact error you are getting with Angular Universal?

[moioo91120]

Hello, same request here.

At least please add some condition to prevent localstorage to be accessed on server rendering :

ex

import { isPlatformBrowser } from '@angular/common';

(...)
   constructor(@Inject(PLATFORM_ID) private platformId: Object) {  }

(...)
     if (isPlatformBrowser(this.platformId)) {
            localStorage. do things 

      }

[DanielKucal]

Hello @moioo91120, thanks for using ngx-store! Why not to use polyfill for node.js enviroment? E.g. this one: https://github.com/capaj/localstorage-polyfill
I haven't worked with Angular Universal, just wondering is it a solution... Maybe this way it would be possible to define some default (or user-specific) values, so the page would be rendered as wanted?

[moioo91120]

Yes, thanks for your port of angular2-localstorage, it's very convenient.

Actually, I use localstorage to store customer token. So I don't really need localstorage to render the page on server side.

However, when I compile my project with angular universal, I get
ConfigHelper._webStorageUtility = new __WEBPACK_IMPORTED_MODULE_0__utility_webstorage_utility__["a" /* WebStorageUtility */](localStorage, 'NGX-STORE_');

It would be perfect if we had the following behaviour, tell me what you think of it :

• On browser side, localstorage stay as is
• On server side :
  @Localstorage public variable1: string = ''
  has the same behaviour than
  public variable1: string = ''

So basically ignoring the @localStorage for server rendering.

[Sampath-Lokuge]

Any news about this issue? @DanielKucal

[jsdream]

@DanielKucal The exact issues of running ngx-store on server are these direct references to window object, which is not defined on the server:
https://github.com/zoomsphere/ngx-store/blob/master/src/utility/storage/storage-event.ts#L11
https://github.com/zoomsphere/ngx-store/blob/master/src/utility/storage/storage-event.ts#L15
https://github.com/zoomsphere/ngx-store/blob/master/src/utility/storage/storage-event.ts#L19
https://github.com/zoomsphere/ngx-store/blob/master/src/service/session-storage.service.ts#L15
https://github.com/zoomsphere/ngx-store/blob/master/src/service/local-storage.service.ts#L15
etc...

And document:
https://github.com/zoomsphere/ngx-store/blob/master/src/utility/storage/cookies-storage.ts#L48
https://github.com/zoomsphere/ngx-store/blob/master/src/utility/storage/cookies-storage.ts#L72

[Gitelaus]

Somewhat confused by this issue. It's mentioned here the issue with running in non-browser instance is the references to window.

But in the readme of this project, it is mentioned that it supports nativescript-localstorage. Nativescript obviously has no window object, so how does this project support nativescript-localstorage considering it then falls over when there's a lack of window?

[GetTaxSolutions]

This is related issue:
aspnet/JavaScriptServices#567

May be switch between BrowserStorage (will use browser storages) and ServerStorage (will use localstorage-polyfill) and using the interface form base class StorageService is good idea.

What do you think?

[bendigoelectronics]

Tested today to see if this works with Universal.

I created a new Angular project, ran the SSR installation as per docs.
I added WebStorageModule from ngx-store to app module.
Then tried to build and received this error.

/home/summer/localstorage-test/dist/server.js:132373
ConfigHelper._webStorageUtility = new WebStorageUtility(localStorage, CONFIG_PREFIX);
^

ReferenceError: localStorage is not defined

[DanielKucal]

@Gitelaus, it works with NativeScript when using https://github.com/NathanaelA/nativescript-localstorage, which polyfills storage functions in NS environment.

I'd suggest all polyfilling your server environment, e.g. like presented here https://github.com/Angular-RU/angular-universal-starter/blob/master/server.ts#L11
I don't see much sense in polyfills in every repository, they would be duplicated and the whole project would weight more, even for people who don't need it...

[BruneXX]

Hi Guys, any update on this?

[BruneXX]

Hello @moioo91120, thanks for using ngx-store! Why not to use polyfill for node.js enviroment? E.g. this one: https://github.com/capaj/localstorage-polyfill
I haven't worked with Angular Universal, just wondering is it a solution... Maybe this way it would be possible to define some default (or user-specific) values, so the page would be rendered as wanted?

Hi @DanielKucal I think that polyfill will work but only for localstorage and not for session, what do you think? have you tested it?

[DanielKucal]

I don't have an environment to test it at this moment. Why it would not work session storage? The goal of polyfills here is to just pretend that those globals exist, not actually work, it's just for rendering the template, right?

[Ledzz]

Hi guys, that what I've used on server side just to get the app working:

import 'localstorage-polyfill';

(global as any).sessionStorage = (global as any).localStorage;
(global as any).document = {cookie:''};
(global as any).window = {
  location: {}
};

You need to insert this at your server.ts file.

[mradamhoward]

Hi guys I am trying to run npm run dev:ssr but getting
ReferenceError: document is not defined
C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:105222
if (this.cachedCookieString === document.cookie) {

I tried the polyhill as Ledzz suggested. No joy.

I am using Angular 14

[mradamhoward]

Hi guys, that what I've used on server side just to get the app working:

import 'localstorage-polyfill';

(global as any).sessionStorage = (global as any).localStorage;
(global as any).document = {cookie:''};
(global as any).window = {
  location: {}
};

You need to insert this at your server.ts file.

this doesnt work for me document is not defined

[mradamhoward]

Hi guys, that what I've used on server side just to get the app working:

import 'localstorage-polyfill';

(global as any).sessionStorage = (global as any).localStorage;
(global as any).document = {cookie:''};
(global as any).window = {
  location: {}
};

You need to insert this at your server.ts file.

Does this work with npm run dev:ssr for you? It doesnt work for me still document is not defined

[mradamhoward]

Hello, same request here.

At least please add some condition to prevent localstorage to be accessed on server rendering :

ex

import { isPlatformBrowser } from '@angular/common';

(...)
   constructor(@Inject(PLATFORM_ID) private platformId: Object) {  }

(...)
     if (isPlatformBrowser(this.platformId)) {
            localStorage. do things 

      }

Can we try to implement this?

[mradamhoward]

I am getting error

C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:92808
  throw new Error("NotYetImplemented");
  ^

Error: NotYetImplemented
    at Document.exports.nyi (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:92808:9)
    at CookiesStorage.getAllItems (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:127013:46)
    at new CookiesStorage (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:126928:10)
    at Module.89257 (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:127101:24)
    at __webpack_require__ (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:365915:42)
    at Object.28011 (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:803:12)
    at __webpack_require__ (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:365915:42)
    at Object.34440 (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:631:12)
    at __webpack_require__ (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:365915:42)
    at Object.90158 (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:94:39)

A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:58853

when trying to npm run dev:ssr