Angular独立组件SSR：localStorage修复后ng build无限运行问题

1. SSR环境无浏览器API：Angular SSR在服务器端（Node.js环境）运行时，不存在浏览器的window和localStorage对象，直接调用会抛出ReferenceError。你之前加的window存在性判断虽然能绕开报错，但逻辑不够严谨，可能触发构建时的循环检测。
2. 构建无限运行的诱因：
   • 不规范的环境判断逻辑可能导致Angular的SSR构建进程无法完成预渲染或代码打包，陷入循环。
   • 未正确配置localstorage-polyfill，服务器端仍缺少localStorage的模拟实现，导致代码逻辑出现隐性阻塞。
3. 独立组件+SSR的适配问题：Angular 17独立组件模式下，服务的依赖注入需要严格遵循SSR的环境隔离规则，直接访问浏览器API容易打破这种隔离。

1. 使用Angular官方环境判断API替代window检查 #

这是最可靠的方式，借助PLATFORM_ID和isPlatformBrowser来区分浏览器/服务器环境，避免直接操作window：

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

@Injectable({ providedIn: 'root' })
export class ShoppingCartService {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  getCartOrCreateCartId(): string {
    // 仅在浏览器环境下操作localStorage
    if (isPlatformBrowser(this.platformId)) {
      let cartId = localStorage.getItem('cartId');
      if (!cartId) {
        cartId = this.generateCartId();
        localStorage.setItem('cartId', cartId);
      }
      return cartId;
    }
    // 服务器端返回临时标识，后续浏览器端再替换
    return 'server-temp-cart-id';
  }

  private generateCartId(): string {
    // 生成唯一ID的逻辑，示例：
    return crypto.randomUUID(); // 或自定义随机字符串生成
  }
}

2. 正确配置localstorage-polyfill（可选） #

如果需要在服务器端模拟localStorage（比如预渲染时需要保留状态），在server.ts顶部添加以下配置：

// 引入polyfill
import 'localstorage-polyfill';

// 将polyfill挂载到Node.js的global对象
global['localStorage'] = localStorage;

3. 排查构建循环问题 #

• 清理构建缓存：执行ng build --clean清除旧的构建产物，避免缓存导致的异常。
• 临时禁用预渲染测试：修改angular.json中的预渲染配置，暂时关闭预渲染，看构建是否能正常完成：

  "prerender": false
  

  如果关闭后构建正常，说明预渲染阶段的逻辑存在问题，需要检查getCartOrCreateCartId是否在预渲染时触发了重复的状态变更。
• 检查服务依赖：确保ShoppingCartService没有被重复提供（比如在多个组件的providers数组中重复声明），避免DI循环导致构建阻塞。

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