Angular 14升级至15后SSR模式下Nginx报502错误排查求助

问题概述 #

将Angular 14项目升级到15版本后，SSR模式部署出现Nginx 502错误，核心表现为根路径访问失败，但API接口正常，且存在特殊场景下的异常运行现象。

部署环境与配置 #

• 部署流程：本地执行npm run build:ssr生成server和browser目录，上传至服务器后通过Docker运行Nginx
• Nginx配置：

server {
    listen 443 ssl;
    gzip on;
    gzip_types text/plain text/css application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_proxied no-cache no-store private expired auth;
    gzip_min_length 1000;
    server_name ${NGINX_HOST};
    ssl_certificate /etc/letsencrypt/live/${NGINX_HOST}/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/${NGINX_HOST}/privkey.pem;
    
    location /api {
        proxy_pass http://core;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location / {
        alias /frontend/browser/;
        index index.html;
        try_files $uri  @universal;
    }
    
    location @universal {
        #port defined in your server.js
        proxy_pass http://localhost:4000; 
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

    }
}

关键异常现象 #

• Angular 14构建产物部署后运行正常，Angular 15构建产物访问根路径/时触发Nginx 502错误（提示连接上游失败），/api接口可正常访问
• 特殊场景：先部署Angular 14产物启动Nginx，不重启直接替换为Angular 15产物，应用可正常运行；重启Nginx后则再次出现502错误
• 更换SSR服务端口（如4000改为8000）后，Angular 14版本也出现502错误
• 本地执行npm run serve:ssr运行Angular 15项目一切正常（端口4000）

核心错误日志 #

运行Angular 15生成的main.js时出现语法错误：

nginx    |     SyntaxError: Unexpected token '.'
nginx    |     at wrapSafe (internal/modules/cjs/loader.js:915:16)
nginx    |     at Module._compile (internal/modules/cjs/loader.js:963:27)
nginx    |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
nginx    |     at Module.load (internal/modules/cjs/loader.js:863:32)
nginx    |     at Function.Module._load (internal/modules/cjs/loader.js:708:14)
nginx    |     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
nginx    |     at internal/main/run_main_module.js:17:47

问题根源分析 #

这个SyntaxError: Unexpected token '.'是触发502错误的核心原因：

• 服务器上运行SSR服务的Node.js版本过低，不支持Angular 15构建产物中使用的ES2020+语法（比如可选链操作符?.、私有字段#等）
• 特殊场景的解释：
  • 先部署Angular14再替换Angular15不重启Nginx能运行：此时SSR服务的Node进程是Angular14启动的，替换文件后进程未重新加载，仍在运行兼容低版本Node的代码
  • 重启Nginx后需要重新启动SSR服务，此时低版本Node运行Angular15产物触发语法错误，导致SSR服务启动失败，Nginx无法连接上游端口（localhost:4000），从而报502
  • 更换端口后Angular14也报错：端口变更后需要重启SSR服务，同样触发低版本Node运行代码的兼容性问题

排查与解决步骤 #

• 检查Node.js版本：在服务器/Docker容器中执行node -v，Angular 15要求Node.js版本至少为14.20.x、16.13.x或18.10.x，若版本过低需升级
• 验证SSR服务启动：在服务器上单独执行node server/main.js，确认是否能正常启动，观察报错信息定位问题
• 检查Docker镜像：若使用Docker运行SSR服务，确保镜像使用的Node版本符合Angular15的兼容性要求，避免使用node:12等过时镜像
• 调整构建配置：修改angular.json中的SSR构建配置，将target设置为与服务器Node版本兼容的ES版本（比如ES2019），强制Angular构建时转译到更低版本的JS语法
• 确认端口占用：检查目标端口（如4000、8000）是否被其他进程占用，避免端口冲突导致SSR服务启动失败

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