Angular SSR运行报错：ReferenceError: document is not defined 求助解决

这个错误源于SSR在Node.js服务端环境运行，不存在浏览器专属的document对象，代码中直接调用document的逻辑在服务端执行时就会触发报错，按以下步骤处理：

1. 定位问题代码 #

根据报错路径D:\MC\front_end_tickmi\dist\tickmi_frontend\server\711.js:33548:12，找到对应的源码位置，区分是自定义代码还是第三方库导致的问题。

2. 自定义代码修复 #

如果是自己编写的代码调用了document，通过平台环境判断限制代码仅在浏览器执行：

• 若使用Angular（从报错中的Zone和dev:ssr命令判断大概率为Angular项目），用官方提供的isPlatformBrowser工具：

  import { isPlatformBrowser } from '@angular/common';
  import { Inject, PLATFORM_ID } from '@angular/core';
  
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  
  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      // 这里写所有依赖document的逻辑，比如获取DOM元素、操作Cookie等
      const elem = document.getElementById('target');
    }
  }
  

• 通用方案：直接判断document是否存在：

  if (typeof document !== 'undefined') {
    // 执行依赖document的代码
  }
  

3. 第三方库处理 #

如果是第三方库内部调用了document，分两种情况处理：

• 动态加载库：仅在浏览器环境下导入并使用第三方库：

  if (isPlatformBrowser(this.platformId)) {
    import('问题库名称').then(module => {
      // 初始化并使用该库
    });
  }
  

• 替换库：如果该库完全不支持SSR，寻找功能一致且支持服务端渲染的替代库。

4. 额外排查点 #

• 检查模块初始化、服务构造函数等会在服务端执行的生命周期，避免在这些环节直接调用document；
• 确认全局样式或脚本中是否有依赖document的代码，移到客户端专属逻辑里。

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