Fix NotFoundError in Angular When Deploying

Angular 404 Errors After Deployment

Your Angular app works locally but returns 404 on every route except the root after deploying. This is the most common Angular deployment issue.

The Problem

Angular is a single-page application. The server must return index.html for ALL routes, letting Angular's router handle the URL. Without this, the server tries to find a file matching the URL path and fails.

Nginx

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

Apache (.htaccess)

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Vercel (vercel.json)

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

AWS S3 + CloudFront

Set the CloudFront error page to return index.html for 404s with a 200 status code:

Error Code: 404
Response Page Path: /index.html
HTTP Response Code: 200

Firebase (firebase.json)

{
  "hosting": {
    "rewrites": [
      { "source": "**", "destination": "/index.html" }
    ]
  }
}

Base Href for Subdirectories

If deployed under a subpath:

ng build --base-href /my-app/

Bugsly monitors your Angular app's error rate after deployments, catching 404 spikes that indicate a misconfigured server.