How to route Angular app inside Nginx container?

Finally, after 15 days of labour, I fixed it!

It was the listen [::]:80 line in the nginx configuration who was the problem.In addition, the port was not set properly for the frontend container.

This is how I achieve it:

frontend Dockerfile:

# Stage 0: compile angular frontendFROM node:latest as buildWORKDIR /appCOPY . . RUN npm installRUN npm run build --prod# Stage 1: serve app with nginx serverFROM nginx:latestCOPY --from=build /app/dist/pointeuse  /usr/share/nginx/htmlCOPY nginx.conf /etc/nginx/conf.d/default.confEXPOSE 80

Nginx configuration:

server {  listen 80;  sendfile on;  default_type application/octet-stream;  gzip on;  gzip_http_version 1.1;  gzip_disable      "MSIE [1-6]\.";  gzip_min_length   256;  gzip_vary         on;  gzip_proxied      expired no-cache no-store private auth;  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;  gzip_comp_level   9;  root /usr/share/nginx/html;  location / {    try_files $uri $uri/ /index.html =404;  }}

Docker-compose file:

version: '3.1'services:        frontend:                container_name: clockmachine-frontend                depends_on:                        - database                         - backend                image: clockmachine-frontend                build:                        context: ./frontend                        dockerfile: frontend.dockerfile                ports:                        - "80:80"        database:                container_name: mongo                image: mongo                ports:                        - "27017:27017"        backend:                container_name: clockmachine-api                image: clockmachine-api                build:                        context: ./backend                        dockerfile: backend.dockerfile                environment:                        - NODE_ENV=production                ports:                        - "3000:3000"

As you can notice, I renamed the files of my context.

Containerize angular application with nginx server is a mess because the documentation are disparate.

In case you want deploy an Angular app

Check this link:

1. Angular deployment Documentation
2. Dan Wahlin example
3. Serving static content with nginx
4. Nginx.org documentation

I think that the problem is that you use /myapplication prefix for the frontent application.
The best would be if you host app directly on the root url and not use the "virtual directory".

However if you still need to use it, you need to set in Angular index.html Base href (https://angular.io/guide/deployment#the-base-tag) to the path that you will use, in this case "/myapplication".

Secondly, the try_files $uri $uri/ myapplication/index.html =404 should be try_files myapplication/$uri myapplication/$uri/ myapplication/index.html =404 as you don't want to redirect elements that does not start with myapplication.