How to route Angular app inside Nginx container?

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.

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 frontend
FROM node:latest as build
WORKDIR /app
COPY . . 
RUN npm install
RUN npm run build --prod


# Stage 1: serve app with nginx server
FROM nginx:latest
COPY --from=build /app/dist/pointeuse  /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 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