localStorage is not defined (Angular Universal)

Question

I am using universal-starter as backbone.

When my client starts, it read a token about user info from localStorage.

@Injectable()
export class UserSe         


        

Answer 1

I am having a similar issue with Angular 4 + Universal following steps here to configure a SPA that can render at client side or server side.

I am using oidc-client because I need my SPA to act as an OpenId Connect/Oauth2 client for my Identity Server.

The thing is that I was having the typical problem where localStorage or sessionStorage are not defined in server side (they only exist when there's a window object, therefore it wouldn't make sense for nodeJs to have these objects).

I have unsuccessfully tried the approach to mock the localStorage or sessionStorage and use the real one when in browser and an empty one in server.

But I came to the conclusion that for my needs I don't really need localStorage or sessionStorage to do anything in server side. If executed in NodeJs, simply skip the part where sessionStorage or localStorage is used, and the execution will then happen at client-side.

This would suffice:

console.log('Window is: ' + typeof window);
    this.userManager = typeof window !== 'undefined'? new oidc.UserManager(config) : null; //just don't do anything unless there is a window object

In client-side rendering it prints: Window is: object

In nodeJs it prints: Window is: undefined

The beauty of this is that Angular Universal will simply ignore the execution/rendering at server side when there is no window object, BUT that execution will be working fine when Angular Universal sends the page with javascript to the browser, therefore even if I am running my app in NodeJs eventually my browser prints the following: Window is: object

I know this is not a proper answer for those who really need to access localStorage or sessionStorage in server side, but for most of the cases we use Angular Universal simply to render whatever is possible to render in server side, and for sending the things that can't be rendered to the browser to work normally.