How to access Angular app in docker container via nginx reverse proxy

Question

I'm trying to use docker to containerize services, including an Angular app. Each of the services uses /service-name as the end of the url.

If I make a toy flask service, I can access it just fine at locahost:3333/toy-flask-service, but when trying to do the same with Angular (e.g. locahost:3333/angular-service) then I get errors. Admittedly the flask service is a simple example using the built in dev server, but the angular service is using nginx within the same container.

Say I have the following containers the hold the following:

• reverse-proxy (nginx accessible via port 3333)
• main_client (vue.js using development service that occupies the root path)
• service_1 (flask app using a development server)
• angular-service (angular app using nginx)

If I run the container with the angular app, I can access it via localhost:4200 just fine. It loads correctly.

If I try and access it via localhost:3333/angular-service, then I get javascript console errors like the following...

Loading module from “http://localhost:3333/runtime-es2017.b7ccab836de1e8b6cb8e.js” was blocked because of a disallowed MIME type (“text/html”).

If I go to http://localhost:3333/angular-service/runtime-es2017.b7ccab836de1e8b6cb8e.js then the browser shows the content of the .js file, so the console errors seem to imply it's trying to look for it without taking the preceding angular-service/ path into account.

I hope I'm correct in assuming that the angular container should be able to be configured as if it's completely independent of the reverse proxy, and it's the nginx.config file for the reverse proxy that is configured incorrectly. It doesn't seem right that I'd have to use --base-href and --deploy-url when building the angular app to account for the /angular-service path

Here's the DockerFile I use for creating the angular + nginx image.

#stage 1
FROM node:14.21-slim as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run ng -- build --prod

#stage 2
FROM nginx:alpine
COPY --from=node /app/dist/my-app /usr/share/nginx/html

The angular container's ngix.config is the default.

The upstream reverse-proxy looks like

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
  worker_connections 1024;
}

http {
  server {
    listen 3333;
    server_name localhost 127.0.0.1;

    location / {
        proxy_pass          http://main-client-app:80;
        proxy_set_header    X-Forwarded-For $remote_addr;
    }

    location /toy-flask-service {
        proxy_pass          http://toy-flask-service:5001/;
        proxy_set_header    X-Forwarded-For $remote_addr;
    }

    location /angular-service {
        proxy_pass          http://angular-service:80/;
        proxy_set_header    X-Forwarded-For $remote_addr;
        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;
    }
  }
}

Note that if I change the location of the angular service to be at the root position i.e. location / (and remove the main-client), then the angular app loads correctly. It just doesn't seem to like the non-root path.

I've read somewhere that adding include /etc/nginx/mime.types; to the http block helps, but it didn't in my case.

I've also experimented with rewrite /?angular-service/(.*)$ /$1 break; (from this answer), and tried try_files (from this answer)

location ~ ^/angular-service/.*\.(html|js|css|eot|svg|ttf|woff|woff2|png|gif|ico|jpg|jpeg)$ {    
    try_files $request_uri $request_uri/ =404;  
}

What am I missing in the nginx.conf of the reverse proxy to solve the path issues for Angular?