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

Question

I have a angular 2 application that uses routing. When I hit my base URL then the page loads correctly and routes to the next page. However if I refresh the same page then it throws a 404 error. For example if I enter my base url which is example.com then it routes to example.com/dashboard but if I refresh this page then it will result in 404 error.

I have following in my Nginx configuration settings file:

server  {
  ssl  on;
  ssl_certificate  Certificate.cer;
  ssl_certificate_key  privateKey.key;

  listen  443 ssl;
  server_name example.com;
  location / {
    include proxy_params;
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass  http://localhost/temp/;

 }

 location /app {
    include proxy_params;
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass  http://12.34.56.78:5001;

 }

}

Above results in 404 error when page is refreshed. Based on this link I modified my Nginx configuration to add try_files section as below:

UPDATED:

server  {
  ssl  on;
  ssl_certificate  Certificate.cer;
  ssl_certificate_key  privateKey.key;

  listen  443 ssl;
  server_name example.com;
  location / {
    include proxy_params;
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass  http://localhost/temp/;
    alias /usr/share/nginx/html/proj1;
    try_files $uri $uri/ /index.html$is_args$args;

 }

 location /app {
    include proxy_params;
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass  http://12.34.56.78:5001;

 }

}

With above it now throws error that it cannot find JS file. All my JS files that referenced in the index.html(example like <script src="app.js"></script>) file are present in the same directory as index.html.

Edit: This is what I see in Networks tab of Chrome Console for one of the JS error:

**General:**
Request URL: https://example.com/script.js
Request Method: GET
Status Code: 404 Not Found
Referrer Policy: no-referrer-when-downgrade

**Response Header:**
Connection: keep-alive
Content-Length: 571
Content-Type: text/html
Date:
Server: nginx/1.12.2

Answer 1

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

Answer 2

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.