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

[jonasfroeller (Jonas Fröller)]

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: prepper-bunker/prepper-bunker-frontend at main · jonasfroeller/prepper-bunker · GitHub
Here is the broken deployment: https://prepper-bunker.vercel.app

Minimal reproduction (without rewrites): GitHub - jonasfroeller/vercel-angular-subdir-repro: vercel-angular-subdir-repro

(fra1::wp5pc-1744381187955-9a7378506a61)

[miguelcabs]

Hey @jonasfroeller 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

[jonasfroeller (Jonas Fröller)]

Hey,
Thanks for the reply. The problem is that I get 404 Not Found, if I do not add the rewrite.
See GitHub - suaskot/vercel-angular-subdir-repro: 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"
        }
      ]
    }
  ]
}

[miguelcabs]

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)