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

score 17 · Answer 1 · answered Aug 23 '18 at 16:28

17

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

answered Aug 23 '18 at 16:28

danday74

52,471
49
232
283

I tried adding the try_files but it now throws error that it cannot find `JS` file. All my `JS` files that referenced in the `index.html`(example like ``) file are present in the same directory as `index.html`. See my Updated settings in above post – user2966197 Aug 23 '18 at 17:04
ok when the browser requests a .js file is it serving up the index page? check your browser network tab and see what is being requested and what is actually delivered. If so, you just need to configure nginx to restrict your new rule to html files only. Google it and I'm sure you will find help. If it is just not finding your js files then maybe you need to adjust the root value – danday74 Aug 23 '18 at 17:06
1

I have added in above post what I see in the networks tab for one of the JS not found error. – user2966197 Aug 23 '18 at 17:18
ok so its just simply not finding the file, there is prob an nginx property that will tell it where to look for them – danday74 Aug 23 '18 at 17:20
Do you know what nginx property it could be? – user2966197 Aug 23 '18 at 17:39
you just saved my ass on this one man. Thanks. – Eddie Taliaferro Feb 08 '21 at 01:44

score 1 · Answer 2 · answered Sep 18 '20 at 07:08

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.

score 0 · Answer 3 · answered Dec 27 '22 at 16:48

Above config will give css and js not found error when using proxy. To solve that config can be changed to :

...
server_name    drobonation.com www.drobonation.com;
server_tokens  off;
index          index.html index.htm;

location ~ ^.*\.[js|css]+ {
    proxy_pass http://127.0.0.1:4000;
}

location / {
    proxy_pass http://127.0.0.1:4000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    try_files $uri $uri/ /index.html;
}
...

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

3 Answers3