ERROR ReferenceError: localStorage is not defined in Angular 17/18

The error ReferenceError: localStorage is not defined occurs in Angular projects when localStorage is accessed in an environment where it is not available, such as on the server side during server-side rendering (SSR) using Angular Universal. The localStorage API is part of the browser's window object, and it is unavailable in non-browser environments.

To fix this error in your Angular 18 project, you can use the following approaches:

---

1. Check if localStorage Exists

Ensure localStorage is accessed only in the browser. Modify your service or component code to check for its availability before using it.

if (typeof window !== 'undefined' && window.localStorage) {
  // Access localStorage here
  localStorage.setItem('key', 'value');
} else {
  console.warn('localStorage is not available.');
}

---

2. Use Angular's Dependency Injection for Platform Check

Use Angular's PLATFORM_ID to check whether the code is running in a browser or on the server.

Example:

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

@Injectable({
  providedIn: 'root',
})
export class StorageService {
  private isBrowser: boolean;

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

  setItem(key: string, value: string): void {
    if (this.isBrowser) {
      localStorage.setItem(key, value);
    } else {
      console.warn('localStorage is not available on the server.');
    }
  }

  getItem(key: string): string | null {
    if (this.isBrowser) {
      return localStorage.getItem(key);
    }
    console.warn('localStorage is not available on the server.');
    return null;
  }
}

---

3. Provide a Fallback for Non-Browser Environments

If the application requires data persistence in both client and server environments, use an alternative to localStorage, such as an in-memory store.

Example:

@Injectable({
  providedIn: 'root',
})
export class StorageService {
  private memoryStorage: { [key: string]: string } = {};

  setItem(key: string, value: string): void {
    if (typeof window !== 'undefined' && window.localStorage) {
      localStorage.setItem(key, value);
    } else {
      this.memoryStorage[key] = value;
    }
  }

  getItem(key: string): string | null {
    if (typeof window !== 'undefined' && window.localStorage) {
      return localStorage.getItem(key);
    }
    return this.memoryStorage[key] || null;
  }
}

---

4. Handle SSR-Specific Code in the Angular Universal App

If using Angular Universal, make sure localStorage calls are wrapped and executed only in the browser.

Example in Component:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor(@Inject(PLATFORM_ID) private platformId: object) {
    if (isPlatformBrowser(this.platformId)) {
      // Access localStorage safely
      localStorage.setItem('key', 'value');
    }
  }
}

---

These approaches will ensure localStorage is used only in environments where it is available, resolving the error in your Angular 18 project. Let me know if you need further guidance!