Building for Production

The production build compiles your Angular application into optimized static files ready for deployment.

Building for Production

ng build --configuration production

Or simply:

ng build

The default configuration is production when no --configuration flag is passed.

What the Production Build Does

1. Ahead-of-Time (AOT) compilation — Templates are compiled to JavaScript at build time, not in the browser
2. Tree shaking — Unused code is eliminated from the final bundle
3. Minification — Variable names are shortened and whitespace removed
4. Bundling — All JavaScript is combined into a small number of files
5. Hashing — Filenames include content hashes for cache busting

Output Structure

dist/my-app/
├── browser/
│   ├── index.html
│   ├── main.3f8a2b1c.js
│   ├── polyfills.7d4e5f6a.js
│   ├── runtime.1a2b3c4d.js
│   ├── styles.9e8d7c6b.css
│   ├── favicon.ico
│   └── assets/
│       └── ...
└── server/          # Only if SSR is enabled
    └── server.mjs

Understanding the Bundles

Build Output Size

A minimal Angular app produces:

• main.js — ~150-200 KB (gzipped: ~50-60 KB)
• polyfills.js — ~30 KB (gzipped: ~10 KB)
• runtime.js — ~2 KB

The CLI warns when bundles exceed configured budgets.

Build budgets are size thresholds defined in angular.json that fail the build when exceeded. They prevent bundle size regressions from reaching production.

Configuring Budgets

{
  "architect": {
    "build": {
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            },
            {
              "type": "any",
              "maximumWarning": "250kb",
              "maximumError": "500kb"
            }
          ]
        }
      }
    }
  }
}

Budget Types

When Budgets Are Exceeded

• Warning — Build succeeds, prints a yellow warning
• Error — Build fails with a non-zero exit code

Analyzing Bundle Size

# Build with stats JSON
ng build --stats-json

# Analyze with webpack-bundle-analyzer
npx webpack-bundle-analyzer dist/my-app/browser/stats.json

This produces an interactive treemap showing which modules contribute most to bundle size.

Deployment

The dist/my-app/browser/ folder contains static files. Deploy to:

• Netlify/Vercel — Drag and drop or connect a Git repo
• GitHub Pages — npx angular-cli-ghpages --dir=dist/my-app/browser
• Nginx — Copy files to the web root
• AWS S3 + CloudFront — Upload to S3, serve via CloudFront
• Firebase Hosting — firebase deploy --only hosting

All these serve the static files and route all requests to index.html for client-side routing.