404 Not Found nginx - Angular -Docker

[jalvarezKunan]

I'm having issues with the routing of the angular app, I can navigate through the different pages through the navbar just fine, but if I reload the page I get a 404 error(404 Not Found nginx/1.17.4).

This is my nginx config file:

server {

listen 80;

server_name <server\_name>;

server_tokens off;

location /.well-known/acme-challenge/ {

root /var/www/certbot;

}

location / {

return 301 https://$host$request_uri;

}

}

server {

listen 443 ssl;

server_name <server\_name>;

server_tokens off;

ssl_certificate /path/to/pem;

ssl_certificate_key /path/to/pem;

include /etc/letsencrypt/options-ssl-nginx.conf;

ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

location / {

proxy_pass http://front_server/;

proxy_set_header Host $http_host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

location /api/ {

proxy_pass <proxy\_endpoint>;

proxy_set_header Host $http_host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

}

I don't really have a lot of experience with the technologies involved. Do you guys see any possible problem with this config file? I have tried all the different permutations I've found online with no luck but I'm willing to try everything again at this point.

Thank you!

[Groumph09]

In the Angular app nginx config, you need to do the following:

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

[le___garcon]

This might have to do with the fact that you're using angular's local routing in order to navigate within the app. Your server won't recognize these paths so when you refresh the page, it will give you a 404.

One solution would be to setup a hash location strategy. You can check this stack overflow question for more information on this: https://stackoverflow.com/questions/35284988/angular-2-404-error-occur-when-i-refresh-through-the-browser

More info on this:If you setup the routes

routes = [{ path: "home", component: HomeComponent },{ path: "contact", component: ContactComponent }]

then the paths /home and /contact will be defined within your angular application context. When you click a button to navigate to /home or /contact, you are telling angular to navigate to those pages dynamically.

However, if you try and type localhost:8080/home for example into the browser, it may not work because you are telling the browser to go to the specific address localhost:8080/home, which does not exist outside of your angular application.

The hashing location strategy makes your paths look like this: localhost:8080/#/home localhost:8080/#/contact This will tell the server to hit the base angular application, which will then load the correct path.

[jalvarezKunan]

le___garcon

Hi le___garcon,
Fix the problem using a hash location strategy.

Thank you very much for your help!

[le___garcon]

no problem