Traefik Path to an Angular app running in docker w

Question

I am deploying an angular app to a docker server using traefik to handle the reverse proxies. I am trying to get it to work via the equivalent of the bellow link:

https://server.url.com/angular-app

Using this link I am getting the following web console errors and a blank page.

Loading failed for the <script> with source “https://server.url.com/runtime.33696abb3e1f13aa52cf.js”. angular-app:17:1
Loading failed for the <script> with source “https://server.url.com/polyfills.b8a0220c9c0a3ba034f8.js”. angular-app:17:1
Loading failed for the <script> with source “https://server.url.com/scripts.806effac119676237f10.js”. angular-app:17:1
Loading failed for the <script> with source “https://server.url.com/main.14b7034556d5690ee2bb.js”.

I've got it to the point that if I manually type in

https://server.url.com/angular-app/index.html

it works as expected, loading the angular app and all it's static content correctly.

I've tried different variations of Traefik labels Path/PathPrefix/PathPrefixStrip and some variations in the nginx.conf

Below is the relevant configuration, the angular app and Dockerfile are both fairly stock standard. I can provide more including the Traefik configuration if necessary.

nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    server {
        listen 80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        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;

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

docker-compose.yml

version: '3'

services:
  api:
    ... 
    labels:
      - "traefik.backend=data-mosaic-api"
      - "traefik.frontend.rule=PathPrefixStrip:/data-mosaic-api"
      - "traefik.docker.network=dev_network"
      - "traefik.enable=true"
      - "traefik.port=8080"

  angular-ui:
    ...
    labels:
      - "traefik.backend=data-mosaic-new"
      - "traefik.frontend.rule=PathPrefixStrip:/angular-app;PathPrefix:=/angular-app"
      - "traefik.frontend.passHostHeader"
      - "traefik.docker.network=dev_network"
      - "traefik.enable=true"
      - "traefik.frontend.priority=1000"
      - "traefik.port=80"
networks:
  dev_network:
    external: true

Answer 1

For anyone who stumbled along this with the same issue the answer was to build my angular app with the following parameters (This is in package.json)

"build": "ng build --prod --base-href /angular-app/"

And have the following label in the docker compose file

- "traefik.frontend.rule=PathPrefixStrip:/angular-app;PathPrefix:/angular-app"

The key theme being front end apps need to have knowledge of the path they are being deployed to, but this can usually be handled via environmental variables or script arguments.

Answer 2

Looks like you're serving your path at ~/angular-app/ but your markup being generated by Angular is outputting back to the domain root. Suggest you look at using a <base href="./" /> in your index.html and possibly needing to fix other settings accordingly to ensure all paths are output with relative paths.

You should get to the point where your index.html should be outputting scripts at just polyfills.b8a0220c9c0a3ba034f8.js (etc) instead of /polyfills.b8a0220c9c0a3ba034f8.js like it probably is right now.

Additionally if you're outputting absolute URL's anywhere in the application, then you'll need to work out how to utilize the X-Forwarded-Prefix (that Traefik appends to proxied requests) in whatever your web host is to resolve the /angular-app bit. In our case, our ASP.NET Core web host has a piece of middleware plugged in to do this.