Angular Build and Deployment

What is Build and Deployment in Angular?

ng build produces optimised, hashed static files in dist/. Any static host can serve them, provided unknown paths are rewritten to index.html so deep links work.

Build and Deployment example

ng build                       # production configuration by default
ng build --base-href /app/      # when deployed under a subpath
ng build --stats-json           # for bundle analysis

SPA rewrite rules

Nginx    location / { try_files $uri $uri/ /index.html; }
Apache   FallbackResource /index.html
Netlify  /*  /index.html  200
Firebase "rewrites": [{ "source": "**", "destination": "/index.html" }]

Key points to remember

• Deploy the contents of dist/<project>/browser, not the whole project.
• Set --base-href correctly when serving from a subdirectory.
• Hashed filenames can be cached forever; index.html must not be.
• Budgets in angular.json fail the build when the bundle grows too large.

Common mistakes with Build and Deployment

• Missing rewrite rule, so refreshing any deep route returns a server 404.
• A wrong base href, which produces a blank page and 404s on the JS files.