Nginx 404 error when existing urls with Angular 2 routing are refreshed

Angular applications are Single Page Applications (SPAs). This means that you only serve up one HTML file, namely index.html

If i refresh on:

/home = index.html

/fred = index.html

/any = index.html

So you need to tell NGINX to always serve up index.html regardless of the route.

For example:

server {  listen 8080;  server_name http://example.com;  root /path/to/your/dist/location;  # eg. root /home/admin/helloWorld/dist  index index.html index.htm;  location / {    try_files $uri $uri/ /index.html;    # This will allow you to refresh page in your angular app. Which will not give error 404.  }}

See How to config nginx to run angular4 application

The problem comes when you are in a path for eg http:///some/path and you hit refresh you get a 404 error page. This extra line in the ngnix configuration could solve the issue.

server {  listen 8080;  server_name http://example.com;  root /path/to/your/dist/location;  index index.html index.htm;  location / {     try_files $uri $uri/ /index.html?/$request_uri;    # This will allow you to refresh page in your angular app.   }}

After adding do a nginx service restart.