Angular 17：保存代码后出现localStorage未定义错误且浏览器重载卡顿

问题原因 #

Angular 17的热重载（HMR）在代码修改保存后的重载阶段，可能会在非浏览器环境（比如热重载初始化的模拟环境）执行组件初始化代码，而localStorage是浏览器专属API，此时直接访问就会抛出ReferenceError。错误被catch后仍可能导致组件状态异常，进而触发页面持续重载。

解决方案 #

1. 直接在代码中添加环境判断 #

修改ngOnInit里的localStorage调用逻辑，先确认当前处于浏览器环境：

async ngOnInit() {
    try {
      await this.fetchUsers();
  
      this.chatService.fetchMessages();
      this.chatService.messages.subscribe((messages) => {
        this.messages = messages;
      });
  
      const users = this.authService.getUsers();
      const { username, id } = this.authService.getUserNameFromToken() || {};
      this.name = username ?? '';
      console.log("Display token name:", this.name);
      // 新增浏览器环境判断
      if (typeof localStorage !== 'undefined') {
        let token = localStorage.getItem('authToken');
        console.log("Token: ",token);
      }
      this.id = id ?? '';
    } catch (error) {
      console.error("Error during ngOnInit:", error);
    }
}

2. 封装localStorage操作到服务（推荐） #

创建一个统一的存储服务来处理环境判断，避免组件里直接调用localStorage：

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

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

  constructor() {
    this.isBrowser = typeof window !== 'undefined' && typeof localStorage !== 'undefined';
  }

  getItem(key: string): string | null {
    return this.isBrowser ? localStorage.getItem(key) : null;
  }

  setItem(key: string, value: string): void {
    if (this.isBrowser) {
      localStorage.setItem(key, value);
    }
  }

  removeItem(key: string): void {
    if (this.isBrowser) {
      localStorage.removeItem(key);
    }
  }
}

然后在组件中注入并使用：

// 导入封装的服务
import { StorageService } from './storage.service';

// 构造函数注入服务
constructor(private storageService: StorageService) {}

async ngOnInit() {
    try {
      await this.fetchUsers();
  
      this.chatService.fetchMessages();
      this.chatService.messages.subscribe((messages) => {
        this.messages = messages;
      });
  
      const users = this.authService.getUsers();
      const { username, id } = this.authService.getUserNameFromToken() || {};
      this.name = username ?? '';
      console.log("Display token name:", this.name);
      // 使用服务获取token
      let token = this.storageService.getItem('authToken');
      console.log("Token: ",token);
      this.id = id ?? '';
    } catch (error) {
      console.error("Error during ngOnInit:", error);
    }
}

3. 临时禁用热重载 #

如果以上方法无效，可以直接关闭热重载功能，修改angular.json中的配置：

"architect": {
  "serve": {
    "options": {
      "hmr": false
    }
  }
}

补充说明 #

热重载时触发该错误，本质是Angular的HMR机制在重载组件时，部分初始化逻辑可能跑在Node.js环境而非浏览器环境，导致localStorage不存在。通过环境判断或统一封装服务，就能避免这个错误，阻止页面持续重载。

内容的提问来源于stack exchange，提问作者Usama Ikram