Angular转Angular Universal后运行npm run dev:ssr出现NG04002错误

NG04002错误的核心原因是服务器端渲染（SSR）过程中，代码尝试访问仅浏览器环境存在的API（如window、document、navigator等）。Node.js服务器环境没有这些浏览器专属对象，因此会触发错误，但客户端渲染时环境正常，所以项目能正常运行。

以下是针对性的解决和排查方案：

1. 用环境判断包裹浏览器API调用 #

Angular提供了PLATFORM_ID和isPlatformBrowser工具，用于区分当前运行环境，在访问浏览器API前先做判断：

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

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

ngOnInit() {
  // 仅在浏览器环境执行依赖window/document的代码
  if (isPlatformBrowser(this.platformId)) {
    const windowWidth = window.innerWidth;
    // 其他DOM操作或浏览器API调用
  }
}

2. 替换直接DOM操作为Angular原生API #

如果代码里有直接调用document.getElementById()、document.querySelector()这类操作，尽量改用Angular的ViewChild、Renderer2等API，避免直接依赖浏览器DOM对象：

import { ViewChild, ElementRef, Renderer2, OnInit } from '@angular/core';

@ViewChild('targetElement') targetElement: ElementRef;

constructor(private renderer: Renderer2) {}

ngAfterViewInit() {
  // 使用Renderer2操作DOM，兼容SSR
  this.renderer.setStyle(this.targetElement.nativeElement, 'color', 'red');
}

3. 排查第三方库的兼容性 #

如果项目引入了第三方依赖，部分库可能在初始化阶段就访问浏览器API。可以：

• 查看库的文档，确认是否支持SSR；
• 用动态导入的方式，仅在浏览器环境加载库：

if (isPlatformBrowser(this.platformId)) {
  import('your-browser-only-library').then(module => {
    // 初始化并使用第三方库
  });
}

4. 定位错误来源 #

打开终端的错误详情，找到NG04002对应的调用栈，定位到具体的组件或代码行。如果错误栈不清晰，可以尝试：

• 暂时注释掉可疑的组件/模块，逐步缩小排查范围；
• 在可能触发错误的代码处添加日志，确认是否在SSR阶段执行。

5. 检查SSR配置 #

确保server.ts中没有直接操作DOM的代码，app.server.module.ts仅导入兼容SSR的模块，避免引入仅客户端使用的依赖（如某些UI组件库的客户端专属模块）。

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