Path errors with Angular SSR with non-root app path (base href)

[realharry]

I'm trying to deploy Angular SSR app to AWS Lambda with aws-serverless-express. It works fine when the app is deployed to the root ('/').

However, when the app is deployed to a path below "/" (e.g., using base href="/subpath"), it generates an error while fetching javascript files. The error message itself does not seem very relevant:

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

It appears that the app is trying to fetch a javascript file from the root (e.g., https://www.examle.com/main-es2015.e109c3b5d6a84a8fab36.js) rather than the correct path (e.g., https://www.examle.com/subpath/main-es2015.e109c3b5d6a84a8fab36.js). This request presumably generates 404 page, and the error message is simply a side effect of receiving html error page instead of the request javascript file.

I spent quite a bit of time trying to understand this problem, and it does not appear to be an Angular Universal issue. It works fine locally. The only time I run into this problem is when I deploy it to Lambda using aws-serverless-express. There seems to be an issue with path mapping in the implementation of awsServerlessExpress.proxy().

My guess at this point is, awsServerlessExpress does not honor base href in index.html. (I see the same problems with files like manifest.webmanifest when non-root base href is set.)

[realharry]

FYI, I use Application Load Balancer/Listerner pointing to a target group (lambda target) with non-empty pathPattern. I am not entirely sure how ALB and lambda interact in terms of path mappings, etc.

[brettstack]

Can you try this on v4? v3 didn't support ALB.