Angular子路径直接访问404：AWS EC2+Nginx环境问题排查与解决

这明显是Nginx配置问题，和你的Angular代码没有关系。

问题原因 #

Angular是单页应用（SPA），所有路由逻辑都在前端浏览器中处理。当你直接访问www.abc.com/login时，Nginx会默认去服务器的/var/www/myfolder目录下找名为login的文件或文件夹——但这个路径根本不存在，因为Angular的所有路由都对应同一个index.html文件，所以Nginx直接返回了404。

而你当前的Nginx配置里，location /块的try_files $uri $uri/ =404;规则是：先找请求的文件，找不到就找对应目录，再找不到就返回404，完全没考虑SPA的前端路由场景。

解决方法 #

修改Nginx的站点配置，把location /里的try_files规则调整为：

server {
  listen 80 default_server;
  listen [::]:80 default_server;
  root /var/www/myfolder;
  index index.html index.htm index.nginx-debian.html;
  server_name _;

  location / {
    # 关键修改：找不到文件/目录时返回index.html，交给Angular前端路由处理
    try_files $uri $uri/ /index.html;
  }
}

修改完成后，重启Nginx让配置生效：

sudo systemctl restart nginx

额外提示 #

如果你的项目里还有后端API接口（比如路径以/api开头），记得单独给API配置location块，避免API请求也被转发到index.html，示例如下：

location /api {
  proxy_pass http://your-api-server-address;
  # 可根据需求添加其他代理配置，比如请求头转发等
}

这样调整后，不管你直接访问哪个Angular子路径，Nginx都会返回index.html，再由Angular的前端路由匹配对应的页面，就不会再出现404错误了。

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