Angular 14 Universal添加SSR时出现EventTarget未定义错误

问题分析 #

启动serve:ssr时出现的ReferenceError: EventTarget is not defined错误，确实和@angular/flex-layout有关。Node.js 14环境中EventTarget并非全局可用对象（Node.js 15及以上版本才默认全局支持），而flex-layout内部的MockMediaQueryList类继承了浏览器环境的EventTarget，导致服务端渲染时找不到该对象。

解决方案 #

方案1：添加EventTarget Polyfill #

1. 安装polyfill依赖包：

npm install event-target-shim --save-dev

2. 在server.ts文件最顶部添加代码，将EventTarget挂载到全局作用域：

import { EventTarget } from 'event-target-shim';
global.EventTarget = EventTarget;

方案2：升级Node.js版本 #

如果项目环境允许，直接将Node.js升级到16.x及以上版本（Angular 14官方推荐Node.js 14.15+，16+对浏览器API的兼容更完善），升级后无需额外配置即可解决该问题。

方案3：检查flex-layout版本兼容性 #

你当前使用的@angular/flex-layout 14.0.0-beta.41和Angular 14.x版本匹配，但如果上述方案无效，可以尝试更新到该分支的最新beta版本，修复可能存在的SSR兼容问题。

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