How Do Angular Build Configurations Work?

1. What is an Angular Build Configuration?

An Angular build configuration is a named set of build settings that tells Angular how to build the application for a particular environment or purpose.

Common configurations are:

development
staging
uat
production

For example:

ng build --configuration production

means:

Build the Angular application using the settings defined for the production configuration.

Build configurations are primarily defined in:

angular.json

They can control things such as:

Optimization
Source maps
Output hashing
File replacement
Bundle-size budgets
Environment-specific settings

2. Full Simple Example

Assume we have three environments:

Development
UAT
Production

Project Structure

my-app/
│
├── angular.json
│
└── src/
    ├── app/
    │   ├── services/
    │   │   └── product.ts
    │   └── app.ts
    │
    ├── environments/
    │   ├── environment.ts
    │   ├── environment.uat.ts
    │   └── environment.production.ts
    │
    └── main.ts

`environment.ts`

Development configuration:

export const environment = {
  production: false,
  apiUrl: 'https://localhost:7001/api'
};

`environment.uat.ts`

export const environment = {
  production: false,
  apiUrl: 'https://uat-api.jntech.in/api'
};

`environment.production.ts`

export const environment = {
  production: true,
  apiUrl: 'https://api.jntech.in/api'
};

`product.ts`

import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

import { environment } from '../../environments/environment';

export interface Product {
  id: number;
  name: string;
  price: number;
}

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  private http = inject(HttpClient);

  private apiUrl = `${environment.apiUrl}/products`;

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.apiUrl);
  }
}

Simplified `angular.json`

The important part is the configurations section:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",

          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "tsConfig": "tsconfig.app.json"
          },

          "configurations": {

            "development": {
              "optimization": false,
              "sourceMap": true
            },

            "uat": {
              "optimization": true,
              "sourceMap": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.uat.ts"
                }
              ]
            },

            "production": {
              "optimization": true,
              "sourceMap": false,
              "outputHashing": "all",

              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.production.ts"
                }
              ]
            }
          },

          "defaultConfiguration": "production"
        }
      }
    }
  }
}

The exact generated angular.json can vary by Angular/CLI version, but the core concept is the same: base options + named configurations.

3. How Does It Work?

Suppose you execute:

ng build --configuration production

Angular CLI reads:

angular.json

It finds:

"production": {
   ...
}

and applies those settings.

The flow is:

ng build --configuration production
                ↓
           angular.json
                ↓
       build.configurations
                ↓
           production
                ↓
    Apply production settings
                ↓
         Compile Angular
                ↓
             dist/

4. Development Build

Run:

ng build --configuration development

or during development:

ng serve --configuration development

Suppose the configuration is:

"development": {
  "optimization": false,
  "sourceMap": true
}

Angular therefore builds with settings intended to make development and debugging easier.

Conceptually:

Development
    ↓
optimization: false
sourceMap: true
    ↓
Easier debugging

5. Production Build

Run:

ng build --configuration production

Production might contain:

"production": {
  "optimization": true,
  "sourceMap": false,
  "outputHashing": "all"
}

Angular produces an optimized deployment build.

Production Build
       ↓
Optimization
Minification
Tree shaking
Output hashing
       ↓
Optimized browser assets

6. What is `fileReplacements`?

This is particularly important for environment-specific configuration.

Application code contains:

import { environment }
  from '../../environments/environment';

Notice that the application always imports:

environment.ts

It does not import:

environment.production.ts

directly.

Instead, the production build configuration can specify:

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.production.ts"
  }
]

When you run:

ng build --configuration production

Angular effectively performs:

environment.ts
      ↓
Replace during build
      ↓
environment.production.ts

Therefore:

environment.apiUrl

uses:

https://api.jntech.in/api

7. UAT Build

You can create your own configuration.

For example:

"uat": {
  "optimization": true,
  "sourceMap": true,

  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.uat.ts"
    }
  ]
}

Now run:

ng build --configuration uat

Angular uses:

environment.uat.ts

Therefore:

environment.apiUrl

becomes:

https://uat-api.jntech.in/api

8. Complete Build Flow

Suppose your service contains:

private apiUrl =
  `${environment.apiUrl}/products`;

Development

ng build --configuration development

Flow:

development
     ↓
environment.ts
     ↓
https://localhost:7001/api
     ↓
/products
     ↓
https://localhost:7001/api/products

UAT

ng build --configuration uat

Flow:

uat
 ↓
fileReplacements
 ↓
environment.uat.ts
 ↓
https://uat-api.jntech.in/api
 ↓
/products
 ↓
https://uat-api.jntech.in/api/products

Production

ng build --configuration production

Flow:

production
    ↓
fileReplacements
    ↓
environment.production.ts
    ↓
https://api.jntech.in/api
    ↓
/products
    ↓
https://api.jntech.in/api/products

9. Important Build Configuration Options

`optimization`

"optimization": true

Controls optimization of the generated application.

Typically:

Development → false
Production  → true

Production optimization helps reduce and optimize browser assets.

`sourceMap`

"sourceMap": true

Creates source maps that make debugging TypeScript easier.

Typical setup:

Development → true
Production  → often false

`outputHashing`

"outputHashing": "all"

Adds hashes to generated filenames.

For example:

main-7HGY92.js
styles-AB12CD.css

When the application changes:

main-XYZ789.js

This helps browsers recognize that a new file must be downloaded rather than using an old cached version.

`budgets`

Angular can also check the size of generated bundles.

Example:

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kB",
    "maximumError": "1MB"
  }
]

If the initial bundle becomes too large:

Bundle
   ↓
500 KB exceeded
   ↓
Warning

If it exceeds:

1 MB

the build can fail with an error.

This helps teams control application size.

10. What is `defaultConfiguration`?

You might see:

"defaultConfiguration": "production"

This specifies which configuration Angular uses when no explicit configuration is supplied for that target.

For example, depending on the project's target setup:

ng build

can use the target's configured default.

To be explicit, especially in CI/CD, you can use:

ng build --configuration production

11. `ng serve` vs `ng build`

These commands serve different purposes.

`ng serve`

Used primarily during development:

ng serve --configuration development

It builds and serves the application using the development server.

Source Code
    ↓
ng serve
    ↓
Development Server
    ↓
Browser

`ng build`

Creates build output for deployment:

ng build --configuration production

Source Code
    ↓
ng build
    ↓
Compile + optimize
    ↓
dist/
    ↓
Deploy

12. Build Configuration vs Environment File

These are related but not the same thing.

Build Configuration	Environment File
Defined in `angular.json`	TypeScript configuration file
Controls build behavior	Contains application settings
Optimization	API URL
Source maps	Feature flags
Output hashing	Environment name
Budgets	Logging settings
Can perform file replacement	Can be replaced by build configuration

For example:

angular.json
      ↓
production configuration
      ↓
fileReplacements
      ↓
environment.production.ts
      ↓
Production API URL

So the build configuration selects how Angular builds, while the environment file provides application-specific values.

13. Important Build-Time Limitation

Suppose:

environment.production.ts

contains:

apiUrl: 'https://api.jntech.in/api'

When you run:

ng build --configuration production

that value becomes part of the generated Angular application.

Therefore:

Source
   ↓
Production configuration
   ↓
Production API URL
   ↓
ng build
   ↓
dist/

If you later want to change the API URL using this build-time approach, you normally create another build.

That's why environment files are considered primarily build-time configuration.

For a:

Build Once
   ↓
Deploy same artifact
   ↓
SIT → UAT → Production

strategy, runtime configuration is often preferable.

Key Points

Angular build configurations are primarily defined in:

angular.json

Common configurations are:

development
uat
production

Select one using:

ng build --configuration production

Build configurations can control:

optimization
sourceMap
outputHashing
fileReplacements
budgets

fileReplacements can replace:

environment.ts

with:

environment.production.ts

Your Angular code continues importing:

import { environment }
  from '../environments/environment';

Build configurations are different from environment files.
Environment files primarily contain application-specific settings such as API URLs.
Build configuration determines how the application is built.
Environment-file replacement is a build-time technique.

Interview Questions and Answers

1. What is an Angular build configuration?

An Angular build configuration is a named set of build settings defined primarily in angular.json. It determines how Angular builds the application for environments such as Development, UAT, or Production.

2. How do you create a production build?

ng build --configuration production

Angular reads the production configuration and applies its build settings.

3. Where are Angular build configurations defined?

Primarily in:

angular.json

under the relevant target's:

configurations

4. What does `optimization` do?

"optimization": true

It enables build optimizations intended to reduce and optimize the generated browser assets.

5. What does `sourceMap` do?

"sourceMap": true

It generates source maps so browser debugging can map generated JavaScript back to the original TypeScript source.

6. What does `outputHashing` do?

"outputHashing": "all"

It adds content-dependent hashes to generated filenames, helping with browser cache invalidation after deployments.

7. What is `fileReplacements`?

It allows Angular to replace one source file with another for a particular build configuration.

{
  "replace": "src/environments/environment.ts",
  "with": "src/environments/environment.production.ts"
}

8. Can we create custom build configurations?

Yes.

For example:

development
sit
uat
production

Then build UAT using:

ng build --configuration uat

9. What is the difference between build configuration and environment configuration?

Build configuration controls how Angular builds:

optimization
sourceMap
outputHashing
budgets

Environment configuration contains application-specific values:

API URL
feature flags
logging settings

The build configuration can select an environment file through fileReplacements.

10. Explain Angular build configuration in one interview answer.

Angular build configurations are named sets of build settings, primarily defined in angular.json, for environments such as Development, UAT, and Production. We select a configuration using --configuration, and it can control optimization, source maps, output hashing, budgets, and file replacements for environment-specific settings.

Angular Build Configurations

How Do Angular Build Configurations Work?

1. What is an Angular Build Configuration?

2. Full Simple Example

Project Structure

environment.ts

environment.uat.ts

environment.production.ts

product.ts

Simplified angular.json

3. How Does It Work?

4. Development Build

5. Production Build

6. What is fileReplacements?

7. UAT Build

8. Complete Build Flow

Development

UAT

Production

9. Important Build Configuration Options

optimization

sourceMap

outputHashing

budgets

10. What is defaultConfiguration?

11. ng serve vs ng build

ng serve

ng build

12. Build Configuration vs Environment File

13. Important Build-Time Limitation

Key Points

Interview Questions and Answers

1. What is an Angular build configuration?

2. How do you create a production build?

3. Where are Angular build configurations defined?

4. What does optimization do?

5. What does sourceMap do?

6. What does outputHashing do?

7. What is fileReplacements?

8. Can we create custom build configurations?

9. What is the difference between build configuration and environment configuration?

10. Explain Angular build configuration in one interview answer.

Keep Learning - More From This Category

`environment.ts`

`environment.uat.ts`

`environment.production.ts`

`product.ts`

Simplified `angular.json`

6. What is `fileReplacements`?

`optimization`

`sourceMap`

`outputHashing`

`budgets`

10. What is `defaultConfiguration`?

11. `ng serve` vs `ng build`

`ng serve`

`ng build`

4. What does `optimization` do?

5. What does `sourceMap` do?

6. What does `outputHashing` do?

7. What is `fileReplacements`?