---
title: "What is ng build? What does production build change?"  
description: "What is ng build? What does production build change?"  
author: "Ravi Vishwakarma"  
published: 2025-12-30  
updated: 2026-03-29  
canonical: https://answers.mindstick.com/qa/116247/what-is-ng-build-what-does-production-build-change  
category: "programming"  
tags: ["angular"]  
reading_time: 2 minutes  

---

# What is ng build? What does production build change?

## Answers

### Answer by Anubhav Sharma

`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

```plaintext
ng build
```

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

## What Does a Production Build Change?

When you run:

```plaintext
ng build --configuration=production
```

(or [older version](https://answers.mindstick.com/qa/94514/how-can-i-continue-using-an-older-version-of-whatsapp-without-updating-it): `ng build --prod`)

Angular performs several **optimizations** to make [your app](https://answers.mindstick.com/qa/33368/how-will-you-design-a-listview-which-downloads-a-lot-of-images-and-displays-in-it-without-getting-your-app-hanged-whats-the-best-possible-way) faster and smaller.

## Key Differences: Dev Build vs Production Build

### 1. Minification

- Removes spaces, comments, and shortens [variable names](https://www.mindstick.com/forum/160065/restrictions-imposed-by-strict-mode-on-the-usage-of-reserved-keywords-and-variable-names)
- Result: Smaller [file size](https://www.mindstick.com/interview/34108/how-can-you-restrict-file-size-when-writing-to-a-log-file)

### 2. AOT Compilation (Ahead-of-Time)

- Templates are compiled at build time (not in browser)
- Faster rendering and fewer [runtime errors](https://www.mindstick.com/forum/159889/how-can-i-debug-javascript-runtime-errors-in-my-web-applications)

### 3. Tree Shaking

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

### 4. Optimization & Bundling

- Combines [multiple files](https://www.mindstick.com/forum/33990/attach-multiple-files-gridview-row-in-knockout-js) into fewer bundles
- Reduces [HTTP requests](https://www.mindstick.com/forum/159694/how-to-handle-http-requests-and-responses-in-a-dot-net-core-api-controller)

### 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

```plaintext
ng build
```

- Larger size
- Debugging enabled
- Slower

### Production Build

```plaintext
ng build --configuration=production
```

- Smaller size
- Faster load time
- Optimized for deployment

## Output Folder

After build:

```plaintext
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


---

Original Source: https://answers.mindstick.com/qa/116247/what-is-ng-build-what-does-production-build-change

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.