Angular + Caddy in Docker behind ocelot API Gateway

[DesterionZA]

1. The problem I’m having:

I am attempting to host an Angular App in Caddy in docker on windows containers all behind an Ocelot API Gateway. When running the angular app in the container with ng server, it works perfectly and I am able to use the app. When i move the built app into caddy, I start getting NG04002 errors, so something is not working in my caddy config.

2. Error messages and/or full log output:

ERROR Error: Uncaught (in promise): Error: NG04002: Cannot match any routes. URL Segment: 'apigateway/client'

3. Caddy version:

2.8.4

4. How I installed and ran Caddy:

a. System environment:

Docker

b. Command:

docker run 
-v E:/Services/Data/caddyfrontend/public:c:/usr/share/caddy/ 
-v E:/Services/Data/caddyfrontend/config:c:/config 
-v E:/Services/Data/caddyfrontend/data:C:/data 
-p 10101:80 
caddy:2.8.4-windowsservercore-ltsc2022

d. My complete Caddy config:

absolutely stock standard, literally changed nothing

{
  "apps": {
    "http": {
      "servers": {
        "srv0": {
          "listen": [
            ":80"
          ],
          "routes": [
            {
              "handle": [
                {
                  "handler": "vars",
                  "root": "/usr/share/caddy"
                },
                {
                  "handler": "file_server",
                  "hide": [
                    "\\etc\\caddy\\Caddyfile"
                  ]
                }
              ]
            }
          ]
        }
      }
    }
  }
}

5. Links to relevant resources:

Im running an ocelot api gateway with config

{
  "UpstreamPathTemplate": "/ClientDomain/{everything}",
  "UpstreamHttpMethod": [
    "GET",
    "POST"
  ],
  "DownstreamPathTemplate": "/{everything}",
  "DownstreamScheme": "http",
  "DownstreamHostAndPorts": [
    {
      "Host": "172.18.4.63",
      "Port": 10101
    }
  ],
  "DangerousAcceptAnyServerCertificateValidator": true
},
  "GlobalConfiguration": {
    "BaseUrl": "https://secure.solutions.com/ApiGateway"
  }

This config routes requests to an internal server, on port 10101.
Effectively my angular app is running on

https://secure.solutions.com/ApiGateway/ClientDomain

I tell angular it is running behind a gateway by giving it a baseHref of ApiGateway/ClientDomain in the angular.json file.

  "configurations": {
    "production": {
      "baseHref": "/apigateway/clientdomain/",
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2MB",
          "maximumError": "4MB"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "2kB",
          "maximumError": "4kB"
        }
      ],
      "outputHashing": "all"
    }
  }

in the index.html of the angular app i have the default base href

<base href="/">

and finally the routes

export const routes: Routes = [
    {path: '', component: ClientComponent},
    {path: 'Application', component: ApplicationComponent}
] satisfies Route[]; 

The error is shown in the console on load of the site.
The header and footers show but the routed content doesnt

I suspect this isn’t just a caddy issue, and in order for me to get this working i need the config for caddy/angular/ocelot to align like the stars…
And now i’m hoping ANYONE can please help me.

[francislavoie]

Sorry for the delay, was taking some time off from the forums.

You’re probably looking for the SPA pattern here: Common Caddyfile Patterns — Caddy Documentation, the key is the try_files which rewrites paths that don’t match a file on disk to instead load index.html.

If you really want to use JSON config instead of Caddyfile, then you can adapt the Caddyfile to JSON using the caddy adapt command.

Out of curiosity, why do you use the Windows image? Why not a Linux image instead? That would seem incredibly inefficient to me (the Windows image is huge).