Angular从6.0.3升级到12.2.7后添加SSR出现500 Internal Server Error求助

排查修复步骤 #

1. 优先校验静态资源路径配置
   你当前server.ts中定义的distFolder路径为dist/browser，从低版本Angular升级上来的项目大概率自定义过构建输出路径，打开angular.json找到projects.你的项目名.architect.build.options.outputPath配置项，确保server.ts中的distFolder路径和该配置完全一致。如果outputPath配置为dist/xxx/browser，就把distFolder对应修改为join(process.cwd(), 'dist/xxx/browser')。

2. 打印具体报错信息定位根因
   默认SSR渲染报错不会输出详细日志，修改server.ts中的全局路由处理逻辑，增加错误打印：

// All regular routes use the Universal engine
server.get('*', (req, res) => {
  res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }, (err, html) => {
    if (err) {
      console.error('SSR渲染异常详情：', err);
      return res.status(500).send(err.stack || err.message);
    }
    res.send(html);
  });
});

修改完成后重新执行npm run build:ssr、npm run serve:ssr，访问页面后查看服务端控制台输出的具体错误内容即可精准定位问题。

3. 最常见错误：浏览器专属API兼容问题
   CSR模式下代码运行在浏览器环境，可直接调用window、document、localStorage等浏览器全局API，但SSR阶段代码运行在Node.js环境，不存在上述API，调用就会触发500错误，修复方式如下：

• 注入PLATFORM_ID标记判断执行环境，把调用浏览器API的逻辑包裹在浏览器环境判断内：

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

@Component({/* 组件配置 */})
export class YourComponent {
  constructor(@Inject(PLATFORM_ID) private platformId: object) {}

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      // 所有调用浏览器API的逻辑放在这里
      console.log(window.innerWidth);
    }
  }
}

• 如果是第三方依赖包内部调用了浏览器API，可在angular.json的SSR构建配置中添加externals配置跳过该依赖的服务端打包，或者使用domino库在Node.js环境模拟全局浏览器对象。

4. 依赖版本校验
   确认package.json中zone.js版本符合Angular 12的要求，需升级到0.11.4及以上版本，版本不匹配也会触发无明确提示的渲染错误。

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