How to Build Angular App for Production: Step-by-Step Guide

Use the Angular CLI command ng build --configuration production to create an optimized production build of your Angular app. This command compiles, minifies, and bundles your app files for fast loading in browsers.

Syntax

The basic command to build an Angular app for production is:

ng build --configuration production

Here:

• ng build tells Angular CLI to compile the app.
• --configuration production applies production settings like minification and optimization.

bash

ng build --configuration production

Example

This example shows how to build a production-ready Angular app using the Angular CLI. It creates a dist/ folder with optimized files ready for deployment.

bash

ng build --configuration production

Output

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files | Names         | Raw Size
main.js           | main          | 1.2 MB
polyfills.js      | polyfills     | 300 KB
runtime.js        | runtime       | 6.5 KB
styles.css        | styles        | 50 KB

Build at: 2024-06-01T12:00:00.000Z

The project was built successfully.

Common Pitfalls

Common mistakes when building for production include:

• Not using the --configuration production flag, which skips optimizations.
• Forgetting to set environment variables properly in environment.prod.ts.
• Not testing the production build locally before deployment.
• Ignoring warnings about bundle size or missing assets.

Always verify your angular.json file has correct production settings.

bash

/* Wrong way: builds without production optimizations */
ng build

/* Right way: builds with production optimizations */
ng build --configuration production

Quick Reference

Summary tips for building Angular apps for production:

• Use ng build --configuration production for optimized builds.
• Check angular.json for production build options like optimization, fileReplacements, and sourceMap.
• Test the build locally with a simple HTTP server before deploying.
• Deploy the contents of the dist/ folder to your web server or hosting platform.

Key Takeaways

Always use ng build --configuration production to create optimized builds.

Verify your environment and build settings in angular.json before building.

Test the production build locally to catch issues early.

Deploy only the contents of the dist/ folder to your server.

Ignoring production flags leads to larger, slower apps.