Upgrade Instructions for Updated Angular Versions

InjectionToken has taken over from OpaqueToken in newer versions of Angular. The new implementation, InjectionToken<T>, offers improved type checking and inference while functioning similarly to its predecessor.

Revised Solution

Here are a couple of key points:

1. Avoid accessing the localStorage object as a global directly, as this indicates a potential issue with your code.
2. Note that window.localStorage is not available in Node.js environments.

To address this, you should inject a localStorage adapter that caters to both browsers and Node.js, resulting in more easily testable code.

In local-storage.ts:

import { InjectionToken } from '@angular/core';

export const LocalStorage = new InjectionToken('localStorage');

In your main.browser.ts file, inject the actual localStorage object from the browser:

import { LocalStorage } from './local-storage.ts';

export function ngApp() {
  return bootstrap(App, [
    // ...

    UserService,
    { provide: LocalStorage, useValue: window.localStorage }
  ]);

For main.node.ts, utilize an empty object instead:

... 
providers: [
    // ...
    UserService,
    { provide: LocalStorage, useValue: { getItem() {} }}
]
...

Your service can then inject this as follows:

import { LocalStorage } from '../local-storage';

export class UserService {

    constructor(@Inject(LocalStorage) private localStorage: LocalStorage) {}

    loadCurrentUser() {

        const token = this.localStorage.getItem('token');
        ...
    };
}

If you're working with Angular 4 or 5, handling a specific issue can be done easily with a straightforward function. Here's how:

app.module.ts

@NgModule({
    providers: [
        { provide: 'LOCALSTORAGE', useFactory: getLocalStorage }
    ]
})
export class AppModule {
}

export function getLocalStorage() {
    return (typeof window !== "undefined") ? window.localStorage : null;
}

If you have a split file for server/client like AppModule, place it in the app.module.shared.ts file - the function won't disrupt your code. However, if you require different behaviors for server and client builds, consider implementing a custom class factory as shown in other answers.

Once the provider implementation is completed, you can inject the LOCALSTORAGE generic into any Angular component and verify the platform type using the Angular-native isPlatformBrowser function before utilizing it:

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Injectable()
export class SomeComponent {
    constructor(
        @Inject(PLATFORM_ID) private platformId: any,
        @Inject('LOCALSTORAGE') private localStorage: any) {

        // do something

    }

    NgOnInit() {
        if (isPlatformBrowser(this.platformId)) {
            // localStorage will be available for use.
        }
        if (isPlatformServer(this.platformId)) {
            // localStorage will be null.
        }
    }
}

It's important to note that since the getLocalStorage() function may return null if the window object isn't accessible, you could simply check for the nullability of this.localStorage and skip the platform type verification entirely. Nevertheless, I recommend the above approach as the function's implementation and return value could change in the future, whereas the return values of isPlatformBrowser / isPlatformServer are inherently reliable.

For further details on this topic, feel free to read my blog post here.

Although unconventional, this method is effective, without requiring any of the infrastructure changes suggested in other responses.

Step 1

Download and install localstorage-polyfill from: https://github.com/capaj/localstorage-polyfill

Step 2

If you have followed the instructions here: https://github.com/angular/angular-cli/wiki/stories-universal-rendering, you should locate a file named server.js within your project's root directory.

Inside the server.js file, include the following code:

import 'localstorage-polyfill'

global['localStorage'] = localStorage;

Step 3

Rebuild your project using npm run build:ssr, and everything should function correctly.

Does this method actually work? From what I can tell, yes.

Is it the optimal approach? Possibly not.

Are there any performance issues? None that I am aware of. Please enlighten me if there are.

Nonetheless, for now, this may be the simplest and most efficient way to ensure my localStorage functions as intended.

To determine whether the current environment is a browser or server, you can utilize the PLATFORM_ID token.

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {

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

   ngOnInit() {

     // Code specific to clients.
     if (isPlatformBrowser(this.platformId)) {
        let data = {key1: 'value1', key2: 'valu2' };
        localStorage.setItem( itemKey, JSON.stringify(data) );
     }

   }
 }

I encountered a similar issue while working with Angular 4 + Universal and followed the steps outlined here to set up an SPA that can render on both the client side and server side.

To act as an OpenID Connect/OAuth2 client for my Identity Server, I am utilizing oidc-client.

The problem arose when localStorage or sessionStorage weren't defined on the server side, leading me to experiment with mock implementations without success.

Eventually, I realized that I didn't actually need localStorage or sessionStorage to function on the server side for my requirements. If running in Node.js, the code can simply skip over those parts and execute on the client-side instead.

A simple solution proved effective:

console.log('Window is: ' + typeof window);
    this.userManager = typeof window !== 'undefined'? new oidc.UserManager(config) : null; //only executes if there is a window object

When rendered on the client-side: Window is: object

On Node.js: Window is: undefined

This approach allows Angular Universal to bypass execution/rendering on the server side when no window object is present, but successfully executes when sent to the browser along with the JavaScript by Angular Universal, resulting in the following message in the browser console even when operating in Node.js: Window is: object

While not a definitive solution for accessing localStorage or sessionStorage on the server side, it proves useful for scenarios where Angular Universal is employed primarily for rendering on the server side while handling client-side tasks appropriately.

While facing a similar issue with the aspnetcore-spa generator, I found a solution that worked for me.

@Injectable()
export class UserService {
  foo() {}

  bar() {}

  loadCurrentUser() {
    if (typeof window !== 'undefined') {
       const token = localStorage.getItem('token');
    }

    // carry out other tasks
  };
}

This approach ensures that client code does not run on the server-side where the 'window' object is absent.

Our project utilizes the following code snippet, inspired by a helpful comment found on this GitHub thread:

import { OnInit, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformServer, isPlatformBrowser } from '@angular/common';

export class CustomClass implements OnInit {

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

    ngOnInit() {
        if (isPlatformServer(this.platformId)) {
            // execute server-side operations
        }

        if (isPlatformBrowser(this.platformId)) {
           localStorage.setItem('myDogs', 'Buddy & Bella')
        }
    }    
}

Big shoutout to @Martin for the amazing help provided. However, there are a few key areas below that require updating in order to ensure everything runs smoothly:

• constructor within user.service.ts
• useValue in main.node.ts and main.browser.ts

This is the current state of my code:

I will be more than happy to mark @Martin's response as the accepted solution once these updates have been made.

On another note, I came across the line

import { LocalStorage } from 'angular2-universal';

, however, I'm unsure about how to implement it.

user.service.ts

import { Injectable, Inject } from '@angular/core';

import { LocalStorage } from '../local-storage';

@Injectable()
export class UserService {
  constructor (
    @Inject(LocalStorage) private localStorage) {}

  loadCurrentUser() {
    const token = localStorage.getItem('token');

    // perform other tasks
  };
}

local-storage.ts

import { OpaqueToken } from '@angular/core';

export const LocalStorage = new OpaqueToken('localStorage');

main.broswer.ts

import { LocalStorage } from './local-storage';

export function ngApp() {
  return bootstrap(App, [
    // ...

    { provide: LocalStorage, useValue: window.localStorage},
    UserService
  ]);
}

main.node.ts

import { LocalStorage } from './local-storage';

export function ngApp(req, res) {
  const config: ExpressEngineConfig = {
    // ...
    providers: [
      // ...

      { provide: LocalStorage, useValue: { getItem() {} }},
      UserService
    ]
  };

  res.render('index', config);
}

It is important for Angular Universal to differentiate between functions meant for the Browser or Server.

One simple approach is:

Option 1

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

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

ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
        // Code specific to client-side operations like local storage
    }
    if (isPlatformServer(this.platformId)) {
        // Code specific to server-side operations like data fetching
    }
}

Option 2

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

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NavigationComponent implements OnInit {
  private isBrowser: boolean = false;

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
    this.isBrowser = isPlatformBrowser(platformId);
  }

  ngOnInit(): void {
      if (this.isBrowser) {
        var retrievedLocale = localStorage?.getItem('preferredLocale');
      }
    }

  changeLocale(category: any): void {
     if (this.isBrowser) {
        window.localStorage.setItem('preferredLocale', locale.code);
      }
    }
  }

My expertise lies more in preparing angular apps to run serverside. However, in a similar scenario with react & nodejs, it is important to ensure that the server understands what localStorage is. One way to achieve this is by creating a stub for localStorage:

//Stub for localStorage
(global as any).localStorage = {
  getItem: function (key) {
    return this[key];
  },
  setItem: function (key, value) {
    this[key] = value;
  }
};

I hope this information proves helpful to you.

Server side does not support LocalStorage implementation. The decision needs to be made whether to write code depending on the platform or use cookies to save and retrieve data. Using ngx-cookie seems to be the best solution for working with cookies on both server and browser environments. To customize Storage class to work with cookies, you can refer to this link: universal.storage.ts

import { Injectable } from '@angular/core';
import { CookieService } from 'ngx-cookie';

@Injectable()
export class UniversalStorage implements Storage {
  [index: number]: string;
  [key: string]: any;
  length: number;
  cookies: any;

  constructor(private cookieService: CookieService) {}

  public clear(): void {
    this.cookieService.removeAll();
  }

  public getItem(key: string): string {
    return this.cookieService.get(key);
  }

  public key(index: number): string {
    return this.cookieService.getAll().propertyIsEnumerable[index];
  }

  public removeItem(key: string): void {
    this.cookieService.remove(key);
  }

  public setItem(key: string, data: string): void {
    this.cookieService.put(key, data);
  }
}

Resolved the problem related to "getItem undefined" by incorporating the following code snippet:

if(window.localStorage){
      return window.localStorage.getItem('user');
}

One effective approach I found was verifying if the document is defined prior to looking into the localStorage.

  if (typeof document !== 'undefined') {

      localStorage.getItem("item")

  }