Why does my Angular app return "404: NOT_FOUND" on Vercel?

By Ohad Krispin, founder of VibeRaven · LinkedIn

An Angular app returns "404: NOT_FOUND" on Vercel on every route when the Output Directory setting points at a folder with no index.html. ng build writes the browser files to dist/my-app/browser, where my-app is your project name, and Vercel serves only the contents of the Output Directory, so an override of just dist serves an empty folder and every path 404s. In the Vercel CLI source, the Angular preset finds dist/my-app/browser by itself and sends paths that match no file to /index.html, so deep links work too. Clear the Output Directory override in Project Settings, or set outputDirectory in vercel.json to the folder that holds index.html, then redeploy.

Where does ng build put the files Vercel has to serve?

The Angular deployment docs say ng build writes to dist/my-app/ by default, and that for static hosting you copy the dist/my-app/browser/ folder. In the application builder schema, the browser value of outputPath defaults to browser. A project that changed outputPath has a different base folder, and may have no dist folder at all.

Vercel serves only the contents of the Output Directory. Its troubleshooting guide says that when the setting does not match where the build tool drops files, Vercel serves an empty folder and every path 404s, and that the Output tab of a deployment shows exactly which files the build produced.

dist/
  my-app/
    browser/    <- the folder that holds index.html

What does the Angular preset on Vercel do by itself?

In the Vercel CLI source (packages/frameworks/src/frameworks.ts, read on 2026-10-31), the Angular preset uses ng build and lists dist as the output directory. When dist holds exactly one entry and it is a folder, the preset uses that folder, or its browser subfolder when one exists; with more entries it falls back to dist. Its routes serve files from the build output first and send every other path to /index.html, so a refresh on /users/42 returns the app.

That fits a Vercel community thread from April 2026: an Angular project with the Angular preset, ng build as the build command and dist as the output directory showed 404: NOT_FOUND, and it worked after the poster removed the production overrides and redeployed.

For a Vite or React app the cause is a missing rewrite instead, covered on the Vite and React page.

How do I set the output directory and the rewrite by hand?

If the project uses the Other preset, or the detection picks the wrong folder, set outputDirectory in vercel.json to the folder that holds index.html. Vercel documents outputDirectory as an override of the Output Directory setting for one deployment, and documents the rewrite below as the one for single-page apps. The Angular docs say a routed app needs a server that returns index.html for a URL like /users/42, and that a real missing page needs no extra configuration, because the Angular router renders its own 404 page.

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "outputDirectory": "dist/my-app/browser",
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Checklist

How to fix it, then check the fix

01
Build locally and find the folder that holds index.html:
```
npm run build
find dist -name index.html
```
02In the Vercel dashboard, open the project's Build and Deployment settings. Check that the Framework Preset is Angular, then turn off the Output Directory override, or set it to the folder from the first step.
03To keep the setting in the repo, add outputDirectory to vercel.json at the root of the project, as shown above.
04Open the Output tab on the deployment's details page and check that index.html is in the served files.
05
Redeploy, because Vercel applies a changed Override setting on the next deployment. Then request a deep link, which should answer 200 and not 404:
```
curl -sI https://your-app.vercel.app/users/42 | head -n 1
```

Sources

Official docs behind this checklist

Browse all launch guides · Read resources · How to make and check your next change

FAQ

FAQ for builders before launch

Why does Vercel say No Output Directory named "dist" found after the Build completed?

The message names the folder the Output Directory setting expects. Compare it with the folders ng build wrote. Angular's outputPath option sets the base folder, so a project that changed it has no dist folder. In a Vercel community thread about an Angular 19 app, the poster fixed it by pointing Vercel at a folder that held the copied dist/browser files.

Does a page that does not exist also return 404 with the rewrite?

The rewrite serves index.html for a path that matches no file, so the Angular router decides what to show. The Angular docs say that 404 pages implemented in the Angular router display correctly.

Do I need a vercel.json at all?

Not when the Angular preset applies and nothing overrides it. In the Vercel CLI source, the preset sets the output folder and the fallback to index.html itself. Add vercel.json when the project uses the Other preset or when the detection picks a different folder.