Angular Universal SSR部署Nginx生产环境：子页面无法渲染求助

1. 修正Nginx路由配置（最常见诱因） #

Angular单页应用的服务端渲染要求Nginx将所有路由请求转发至Node服务，而非直接查找静态文件。若仅配置了根路径转发，子路由会因找不到对应静态文件而失败。

修改sites-available中的站点配置：

server {
    listen 80;
    server_name 你的域名或IP;

    root /var/www/html/dist/browser; # 指向Angular构建生成的browser目录
    index index.html;

    # 优先匹配静态资源，未匹配到则转发至SSR服务
    location / {
        try_files $uri $uri/ @ssr;
    }

    location @ssr {
        proxy_pass http://localhost:4000; # 需与Node服务启动端口一致（Angular Universal默认4000）
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

• 执行sudo nginx -t校验配置语法，无报错后执行sudo systemctl reload nginx生效配置

2. 确认PM2启动的工作目录 #

在/var/www/html目录启动服务时，若未指定工作目录，Node服务可能无法正确读取静态资源路径：

• 查看当前PM2应用详情：pm2 show main，检查cwd字段是否为/var/www/html
• 若路径错误，重新启动并指定工作目录：

pm2 delete main
pm2 start dist/server/main.js --name angular-ssr --cwd /var/www/html

• 再次验证：pm2 show angular-ssr确认cwd为正确目录

3. 修复文件权限问题 #

Ubuntu服务器的权限限制可能导致Node服务无法读取构建产物：

sudo chown -R www-data:www-data /var/www/html/dist
sudo chmod -R 755 /var/www/html/dist

• 执行ls -l /var/www/html/dist/server/main.js确认文件存在且具备可执行权限

4. 查看Node服务错误日志 #

通过PM2日志定位子页面请求的具体错误：

pm2 logs angular-ssr

若日志显示路由或资源不存在：

• 重新执行构建命令确保产物完整：cd /var/www/html && npm run build:ssr
• 检查Angular路由配置（本地正常则概率极低，可快速核对路由定义）

5. 验证Node服务本身可用性 #

在服务器内部测试Node服务是否能处理子路由请求：

curl http://localhost:4000/child-page

• 若返回正常HTML，说明Node服务无问题，问题出在Nginx转发配置
• 若返回404或错误，需检查构建产物完整性或服务端路由逻辑

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