Deploying an Angular Application

In development, running ng serve compiles your code in memory using JIT (Just-In-Time) compilation and ships large bundles with heavy source-mapping directly to the browser. Before showing your application to the world, you MUST compile it rigorously down to minimal Javascript and CSS.

The Build Command

To compile the project for production, run the Angular CLI build command:

ng build

What this command does behind the scenes is incredibly complex:

• AOT (Ahead of Time) Compilation: Converts Angular HTML templates into pure executable Javascript code ahead of time so the browser doesn't have to compile it.
• Tree-Shaking: Automatically deletes any library code or components that you imported but never actually executed.
• Minification & Uglification: Strips out whitespace, linebreaks, and renames long variables (e.g. mySpecialUserVariable becomes a) to reduce byte size.

The final result is output into a brand new folder (typically dist/my-angular-app/browser/). This folder contains absolutely pure, static HTML, CSS, and JS!

Hosting the Static App

Because the output is purely static files, you can host an Angular application virtually anywhere in the world for pennies.

1. Hosting Providers (Vercel, Netlify, Firebase)

The absolute easiest method. You simply connect your GitHub repository to platforms like Vercel or Firebase Hosting. Whenever you push a change to your main branch, they automatically run ng build and serve the dist/ folder globally across their Content Delivery Networks.

2. Self-Hosting via NGINX / Apache

If you manage your own Linux servers, you can drag the dist/ folder to your server and point an NGINX configuration block at it.

Crucial Rule for SPAs:

Because Angular relies on an internal client-side router, you must configure NGINX to redirect ALL incoming 404 URL paths back to index.html. If you fail to do this, users who refresh the page on /dashboard will get a fatal server 404 Not Found error!

# Standard NGINX config for SPAs
location / {
  root /var/www/my-angular-app;
  try_files $uri $uri/ /index.html;
}

Conclusion

Congratulations! You've reached the end of the Angular Masterclass. You now understand the massive architectural capabilities of Angular Components, Services, RxJS streams, and Signals. You have everything you need to build insanely scalable applications mimicking architecture practically everywhere inside Google!