I have an Angular app deployed on Nginx, but I’m unable to navigate directly to different routes. The homepage loads fine, but accessing routes directly or refreshing the page results in a 404 Not Found error from Nginx.

I’ve used the following configuration in nginx.conf, but it’s not working:

    location / {
        try_files $uri $uri/ /index.html;
    }
   error_page 404 /index.html

How can I fix this and ensure Angular routing works properly?

Locally, I can access all routes without issues. For example, navigating to localhost:4200/troubleshoot correctly loads the component.

However, after deploying my Angular app on Nginx (domain: abc), I encounter the following issues:

Visiting abc/troubleshoot directly results in a 404 error.

When accessing abc, it correctly routes to abc/home, but refreshing the page also leads to a 404 error.