Angular 18集成SSR后运行ng serve出现Vite内部错误求助

问题描述 #

将遗留Angular应用升级至Angular 18后，尝试添加SSR功能，已成功执行命令：

ng add @angular/ssr

但运行ng serve时触发如下错误：

3:06:35 PM [vite] Internal server error: Cannot read properties of undefined (reading 'regular')
      at prepareForHydration (node_modules/@angular/platform-server/fesm2022/platform-server.mjs:16983:26)
      at eval (node_modules/@angular/platform-server/fesm2022/platform-server.mjs:17036:3)
      at Generator.next (<anonymous>)
      at fulfilled (.angular/vite-root/transparency-portal/chunk-7PH555RD.mjs:74:24)
      at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone-node.js:365:28)
      at _ZoneImpl.run (node_modules/zone.js/fesm2015/zone-node.js:111:43)
      at eval (node_modules/zone.js/fesm2015/zone-node.js:1192:40)
      at _ZoneDelegate.invokeTask (node_modules/zone.js/fesm2015/zone-node.js:398:33)
      at _ZoneImpl.runTask (node_modules/zone.js/fesm2015/zone-node.js:158:47)
      at drainMicroTaskQueue (node_modules/zone.js/fesm2015/zone-node.js:577:35)

注：已用isPlatformBrowser()包裹所有document和window对象的引用，自身代码无报错。

解决方案 #

排查未兼容SSR的第三方依赖 #

该错误大概率是第三方库在服务端渲染时访问浏览器专属API，或返回未定义值导致。可按以下步骤定位：

• 临时注释非核心第三方组件/服务，逐步启动应用，锁定触发错误的依赖。
• 对该依赖，检查是否支持Angular SSR；若不支持，可在组件初始化时用isPlatformBrowser()延迟加载，或在server.ts中通过provideClientHydration()的excludeComponents配置排除相关组件的服务端渲染。

调整Hydration配置 #

Angular 18 SSR默认启用自动hydration，部分遗留代码或依赖可能不兼容。可临时禁用自动hydration验证：
在app.config.ts中修改配置：

export const appConfig: ApplicationConfig = {
  providers: [
    // 替换原有provideClientHydration配置
    provideClientHydration({
      disableAutoHydration: true
    }),
    // 其他providers...
  ]
};

若禁用后错误消失，说明问题出在hydration阶段，需进一步排查组件状态同步问题，或针对特定组件单独禁用hydration。

统一依赖版本 #

确保所有Angular核心依赖（@angular/core、@angular/platform-server、@angular/ssr等）均为Angular 18最新版，版本不一致易引发SSR运行时冲突。执行更新命令：

ng update @angular/core @angular/cli

同时检查第三方依赖版本，升级至支持Angular 18的最新版。

清理缓存后重建 #

缓存文件异常可能导致该问题，执行以下命令清理后重新启动：

rm -rf node_modules .angular package-lock.json
npm install
ng serve

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