Angular带参数路由在NGINX生产环境部署出现500错误求助

1. 修正NGINX配置语法错误 #

你的NGINX配置里root指令存在语法错误，多写了一个root，这会导致NGINX无法正确识别静态文件目录：

# 错误写法
root root /var/www/html/browser;

# 修正后
root /var/www/html/browser;

2. 调整路由重写规则，避免循环重定向 #

原location /中的try_files配置会触发内部重定向循环，替换为命名location的方式处理Angular单页路由：

location / {
    try_files $uri $uri/ @angular;
}

# 命名location专门处理Angular路由
location @angular {
    rewrite ^ /index.html break;
}

该配置会优先匹配真实存在的文件或目录，当两者都不存在时，通过rewrite break直接返回index.html，避免重复触发location规则导致循环。

3. 验证Angular构建产物 #

确保已执行正确的生产构建命令：

ng build --prod

并将构建生成的dist/[项目名]/browser目录下的所有文件，完整复制到NGINX配置的/var/www/html/browser目录中。

4. 测试访问 #

重启NGINX服务后，访问http://localhost/applogin/testapp，此时Angular路由会正常接管请求，组件内通过this.route.snapshot.paramMap.get('appname')可正确获取到testapp参数。

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