What Does ng build Do in Angular?

What is ng build?

ng build is an Angular CLI command that compiles your Angular application and generates the files needed to deploy/run it in a browser.

ng build

In simple terms:

Angular Source Code
       ↓
    ng build
       ↓
Compile + Bundle + Optimize
       ↓
Deployable Files
       ↓
     dist/

Simple Example

Suppose your Angular application contains:

src/
├── app/
│   ├── app.ts
│   └── app.html
├── main.ts
├── styles.css
└── index.html

Run:

ng build

Angular processes these source files and produces output similar to:

dist/
└── my-app/
    └── browser/
        ├── index.html
        ├── main-ABC123.js
        ├── styles-XYZ456.css
        └── chunk-DEF789.js

The exact structure depends on your Angular version, builder, and rendering configuration.

What Happens Internally?

When you execute:

ng build

several things happen.

1. Angular Compiles the Application

Angular processes:

• TypeScript
• Angular components
• Templates
• CSS
• Routes
• Services
• Pipes
• Directives

For example, you write:

export class App {
  title = 'JN Tech';
}

The browser doesn't directly execute your TypeScript source. The build process transforms the application into browser-executable JavaScript.

2. Angular Compiles Templates

Suppose you have:

<h1>{{ title }}</h1>

@if (isLoggedIn) {
  <p>Welcome</p>
}

Angular compiles the template into efficient JavaScript instructions used by Angular at runtime.

3. Bundling Happens

Your project may contain many files:

app.ts
products.ts
product.service.ts
auth.service.ts
auth.guard.ts
login.ts
dashboard.ts

The build system processes these modules and creates deployable JavaScript bundles/chunks.

For example:

main-ABC123.js
chunk-XYZ789.js

So:

Many Angular/TypeScript files
            ↓
          Build
            ↓
Bundles and chunks

4. Tree Shaking Happens

Unused code can be removed from the production output.

Suppose:

function usedFunction() {
  console.log('Used');
}

function unusedFunction() {
  console.log('Not Used');
}

usedFunction();

Where safely possible, the build optimizer can eliminate unused code.

Used code      → Keep
Unused code    → Remove

This reduces bundle size.

5. Minification Happens

Production optimization makes JavaScript and CSS smaller.

For example, conceptually:

function calculateTotal(price, quantity) {
  return price * quantity;
}

can become compact generated code.

This reduces the amount of data the browser must download.

6. Code Splitting Can Happen

Suppose you lazy-load a component:

{
  path: 'products',
  loadComponent: () =>
    import('./products/products')
      .then(m => m.Products)
}

Angular can generate a separate chunk for that feature.

Application Start
      ↓
main.js loaded
      ↓
User visits /products
      ↓
Products chunk loaded

This can improve initial load performance.

7. Output Hashing

You may see:

main-ABC123.js
styles-XYZ789.css

instead of simply:

main.js
styles.css

The hash helps with browser caching.

If you deploy a new version:

Old:
main-ABC123.js

New:
main-KLM456.js

the changed filename tells the browser that this is a new asset.

8. Generates the dist Output

Finally, Angular writes the build result into the configured output directory, commonly:

dist/

These are the files you deploy.

For example:

Angular Source
      ↓
ng build
      ↓
dist/my-app/browser/
      ↓
Web Server / Static Hosting
      ↓
Browser

ng serve vs ng build

This is an important interview distinction.

Development:

ng serve

Production build:

ng build

or explicitly:

ng build --configuration production

ng build vs ng build --configuration production

In modern Angular projects, the build target commonly has:

"defaultConfiguration": "production"

Therefore:

ng build

usually uses the production build configuration in a standard CLI-generated project.

You can make it explicit:

ng build --configuration production

For development configuration:

ng build --configuration development

Always check your project's angular.json because the default configuration can be changed.

Important: ng build Does Not Deploy

This is a common misunderstanding.

ng build

only builds the application.

It doesn't automatically publish it to IIS, Azure, Nginx, etc.

The flow is:

Angular Source
      ↓
ng build
      ↓
dist/
      ↓
Deployment
      ↓
IIS / Nginx / Azure / Static Hosting

Angular + ASP.NET Core Example

In an Angular + ASP.NET Core Web API architecture:

Angular Source
     ↓
ng build
     ↓
Static Angular Files
     ↓
Web Server
     ↓
Browser
     ↓
HTTP/HTTPS
     ↓
ASP.NET Core Web API
     ↓
SQL Server

ng build builds the Angular frontend. It does not build your ASP.NET Core Web API.

The Web API is built separately, for example:

dotnet build

or published using:

dotnet publish -c Release

Key Points

• ng build is an Angular CLI command.
• It compiles Angular and TypeScript code.
• It compiles Angular templates.
• It creates browser-ready JavaScript/CSS/assets.
• Production configuration performs optimizations such as minification and tree shaking.
• Lazy-loaded code can be split into separate chunks.
• Output hashing helps browser caching.
• Build output commonly goes into dist/.
• ng build builds the application; it does not itself deploy it.
• ng serve is primarily for development; ng build creates deployment artifacts.

Interview Questions and Answers

1. What does ng build do?

ng build compiles an Angular application and generates browser-ready build artifacts. Production builds also apply optimizations such as minification, tree shaking, code splitting, and output hashing.

2. Where does ng build put the generated files?

Usually under the configured:

dist/

directory.

3. Does ng build start a web server?

No.

ng serve starts Angular's development server. ng build creates build artifacts.

4. Does ng build deploy the application?

No.

It creates the files that you subsequently deploy to IIS, Nginx, Azure, static hosting, or another hosting platform.

5. Does ng build compile TypeScript?

Yes. The Angular build pipeline compiles/processes the TypeScript application and generates JavaScript that browsers can execute.

6. What is the difference between ng serve and ng build?

ng serve
   ↓
Build + Development Server
   ↓
Local development

ng build
   ↓
Build Artifacts
   ↓
dist/
   ↓
Deployment

7. What is the production build command?

You can explicitly run:

ng build --configuration production

In projects where production is configured as the default build configuration:

ng build

will use it automatically.

Interview Quick Answer

ng build compiles the Angular application and produces optimized browser-ready files, such as JavaScript, CSS, and HTML, in the configured output directory—commonly dist/. A production build can perform optimizations such as minification, tree shaking, code splitting, and output hashing. The generated files can then be deployed to a web server or static hosting service.