How do I host Angular `v17` (--ssr=false --style=scss) on Vercel?

I want to host my Angular v17 SPA. It is in a subdir of my repo. I set that dir in the Vercel dashboard.

It kind of looks like an Angular problem and not a Vercel problem. Does anybody know how to fix this? It works fine in development and I hosted other Angular sites on Vercel before. The only difference is that this one is not in the root dir.

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

I tried setting the following (vercel.json), because it didn't work by default:

{
  "version": 2,
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

Here is the repository: https://github.com/jonasfroeller/prepper-bunker/tree/main/prepper-bunker-frontend

GitHub

prepper-bunker/prepper-bunker-frontend at main · jonasfroeller/prepper-bunker

This project serves as a learning project for students to develop full-stack applications using Quarkus and Angular Renaissance. - jonasfroeller/prepper-bunker

Here is the broken deployment: https://prepper-bunker.vercel.app

Minimal reproduction (without rewrites): https://github.com/jonasfroeller/vercel-angular-subdir-repro (fra1::wp5pc-1744381187955-9a7378506a61)

Hey welcome, you definitely shouuldn't need the rewrite, I would remove that. That is causing your existing deployment to essentially make everything the index.html

Hey, Thanks for the reply. The problem is that I get 404 Not Found, if I do not add the rewrite. See https://github.com/jonasfroeller/vercel-angular-subdir-repro.

I got it working with the following vercel.json:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ],
  "headers": [
    {
      "source": "/(.*).js",
      "headers": [
        {
          "key": "Content-Type",
          "value": "application/javascript"
        }
      ]
    },
    {
      "source": "/(.*).mjs",
      "headers": [
        {
          "key": "Content-Type",
          "value": "application/javascript"
        }
      ]
    }
  ]
}

interesting enough, i tried to deploy your minimal example and also ran into the 404 issue. However, i did see the output is off in the vercel deploy so maybe I had it configured wrong in Vercel (still poking)