What is ng build? What does production build change?

ng build is a command from Angular CLI used to compile an Angular application into output files that can be deployed to a server.

It takes your Angular project (TypeScript, HTML, CSS) and converts it into:

• Optimized JavaScript bundles
• Compiled HTML/CSS
• Assets ready for browser execution

Basic Usage

ng build

By default, it creates a development build in the /dist folder.

What Does a Production Build Change?

When you run:

ng build --configuration=production

(or older version: ng build --prod)

Angular performs several optimizations to make your app faster and smaller.

Key Differences: Dev Build vs Production Build

1. Minification

• Removes spaces, comments, and shortens variable names
• Result: Smaller file size

2. AOT Compilation (Ahead-of-Time)

• Templates are compiled at build time (not in browser)
• Faster rendering and fewer runtime errors

3. Tree Shaking

• Removes unused code from bundles
• Only required code is included

4. Optimization & Bundling

• Combines multiple files into fewer bundles
• Reduces HTTP requests

5. Dead Code Elimination

• Removes unreachable or unused logic

6. Production Mode Enabled

• Disables Angular development checks (like extra change detection warnings)
• Improves performance

7. Environment File Replacement

• Uses environment.prod.ts instead of environment.ts
• Useful for API URLs, configs, etc.

Example

Development Build

ng build

• Larger size
• Debugging enabled
• Slower

Production Build

ng build --configuration=production

• Smaller size
• Faster load time
• Optimized for deployment

Output Folder

After build:

dist/your-project-name/

This folder contains all files you deploy to your server (IIS, Nginx, etc.)

Summary

• ng build = compile Angular app
• Production build = optimized, faster, smaller, deploy-ready