Nginx configuration with Angular localization, Error 404 Not Found on browser page refresh

I have an angular application with localization for English and Spanish.

My directory structure looks like this

/var/www/html/
├── angular-app/
│ ├── en/
│ │ ├── index.html
│ │ └── other files ...
│ └── es/
│ ├── index.html
│ └── other files ...


I have the following code in the nginx.conf file

http {
# Custom settings
map $http_accept_language $accept_language {
~*^en en;
~*^es es;
}
...


And the following configuration

server {
listen 0.0.0.0:80;
server_name localhost;

root /var/www/html/angular-app;

# Fallback to default language if no preference defined by browser
if ($accept_language ~ "^$") {
set $accept_language "en";
}

# Redirect "/" to Angular application in the preferred language of the browser
rewrite ^/$ /$accept_language;

# assets within the root
location /assets {
autoindex on;
}

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


Now the issue is with refreshing the page, it generates a 404. I did research on Google and everybody is talking about using try_files to resolve this issue, but unfortunately after multiple tries I am still unable to figure out what I did wrong.

Any help is appreciated.

Continue reading...