Angular Universal在Debian+Plesk服务器上部分页面报错求助

问题背景 #

• 运行环境：Debian 11.7 + Plesk 18.0.54 update 1，Node.js 18.17.0
• 应用技术栈：Angular 16.1.6 + Angular Universal 16.1.1
• 异常现象：产品详情页根据URL中的ID加载对应内容，部分ID可正常渲染，部分ID触发服务端渲染报错

错误栈信息 #

/var/www/vhosts/.../dist/server/main.js:17345
: stack.top instanceof impl.HTMLTemplateElement
            ^

TypeError: Right-hand side of 'instanceof' is not an object
at insertElement (/var/www/vhosts/.../dist/server/main.js:17345:29)
at insertHTMLElement (/var/www/vhosts/.../dist/server/main.js:17332:23)
at before_head_mode (/var/www/vhosts/.../dist/server/main.js:19836:31)
at HTMLParser.htmlparser.insertToken (/var/www/vhosts/.../dist/server/main.js:17296:17)
at emitSimpleTag (/var/www/vhosts/.../dist/server/main.js:17519:27)
at data_state (/var/www/vhosts/.../dist/server/main.js:17522:21)
at scanChars (/var/www/vhosts/.../dist/server/main.js:17120:23)
at Object.parse (/var/www/vhosts/.../dist/server/main.js:17029:37)
at exports2.createDocument (/var/www/vhosts/.../dist/server/main.js:29819:29)
at exports2.createWindow (/var/www/vhosts/.../dist/server/main.js:29846:38)

Node.js v18.17.0

排查思路 #

• 对比差异数据
  提取正常和报错的产品ID对应的后端返回数据，重点检查：

  • 是否包含未转义的HTML标签、特殊Unicode字符或非法格式内容
  • 是否存在字段缺失、null/undefined值被直接传入模板渲染逻辑
  • 产品富文本内容中是否包含<template>等特殊标签，这类标签在服务端DOM模拟环境中可能无法被正确识别

• 排查服务端DOM模拟环境
  错误栈显示impl.HTMLTemplateElement未定义，说明服务端渲染依赖的DOM模拟库（如jsdom）初始化异常：

  • 检查server.ts中的DOM环境配置，确认是否正确初始化了全局DOM对象
  • 验证第三方依赖是否存在覆盖或破坏全局DOM构造函数的情况
  • 尝试升级Angular Universal或其依赖的jsdom版本，确保与Angular 16.1.6版本兼容

• 本地复现与调试

  • 在本地搭建相同Node.js版本的环境，复现报错场景，通过断点调试insertElement函数，观察impl对象的结构，明确HTMLTemplateElement未定义的具体原因
  • 逐步禁用产品页的部分渲染模块（如富文本、动态组件），定位触发报错的具体内容模块

• 检查构建与部署配置

  • 确认生产环境构建命令是否正确，排查是否因压缩/混淆工具（如terser）的配置导致DOM相关代码逻辑被破坏
  • 对比本地构建的server/main.js与服务器上的文件，检查是否存在部署过程中的文件损坏或版本不一致问题

内容的提问来源于stack exchange，提问作者Iñigo Gorosabel