Trouble accessing angular application that has routes enabled when running as in a docker container

Loui 0
Viewed 26

I started an AWS EC2 instance, installed docker into it using the user script, and then finally ran two angular applications as docker containers.

On doing docker ps -a returns below output

CONTAINER ID   IMAGE          COMMAND                  CREATED       STATUS       PORTS                                   NAMES
6af958430718   98281ff510f2   "/docker-entrypoint.…"   7 days ago    Up 7 days    0.0.0.0:80->80/tcp, :::80->80/tcp       fervent_thompson
20fdddee4372   3630db805b57   "/docker-entrypoint.…"   2 weeks ago   Up 2 weeks   0.0.0.0:8080->80/tcp, :::8080->80/tcp   pedantic_neumann

So, from the above output, we can see that application 1 is exposed on port 80, whereas application 2 is exposed on port 8080.

So for example, if I try to access application 2, on the publicly exposed IP address of the EC2 instance, I would access it by 19.194.165.258:8080; which works fine.

Application 2 has routes enabled, for example
http://19.194.165.258:8080/parameters
http://19.194.165.258:8080/bundle

From the application, if I switch view, as in I go from bundles to parameters it works fine, the address in the navigation bar changes, but if I directly try to access the parameters page or bundles page, then I get a 404 Not Found Page. Please see below screenshot.

enter image description here

Can someone suggest what am I missing?

angular-routing nginx docker-container docker angular
1 Answers

If you are serving the static build files using nginx, you need to configure Nginx to forward other requests to the /index.html of your application, which makes it so your other pages can't be loaded directly and display a 404 error.

To fix this, add below block in your Nginx configuration files.

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