Universal support - Githubissues

kadosh1000 commented 7 years ago

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 commented 7 years ago

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

moioo91120 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

Any news about this issue? @DanielKucal

jsdream commented 6 years ago

@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 commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

Hi Guys, any update on this?

BruneXX commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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.