How to Build and Run an Angular Application in Production Mode Locally

Aalam Info Solutions LLP

5 min read

·

May 7, 2025

--

1

Listen

Share

Press enter or click to view image in full size

Running an Angular application in production mode locally is an important step in testing, optimizing, and preparing the application for deployment. The production build process in Angular creates an optimized version of the application, making it faster and more efficient. This guide will provide a clear, step-by-step approach for building and running a production-ready Angular application locally, helping users identify any performance improvements or issues that may not appear in development mode.

1. Introduction

In Angular, “production mode” refers to a fully optimized version of the application, built specifically for efficient loading, faster rendering, and better performance. Unlike development mode, which is ideal for coding and debugging, production mode compiles the application in a way that minimizes file sizes and speeds up the overall load time. By testing the application locally in production mode, users can experience the same performance and functionality that end users will see on a live server, ensuring a smooth and polished user experience.

2. Steps to Build and Run an Angular Application in Production Mode Locally

The process can be divided into the following key steps:

• Step 1: Navigate to the Project Directory
• Step 2: Create the Production Build
• Step 3: Understand the Production Build Output
• Step 4: Install and Use a Local Server to Serve the Build
• Step 5: Access the Application Locally in a Browser

Each of these steps is explained in detail below, providing a clear and thorough approach to running the production version of an Angular application.

3. Explanation of Each Step

Step 1: Navigate to the Project Directory

To get started, open a terminal or command prompt. Begin by moving into the root directory of the Angular project where the application files are located. This step prepares the environment for building and serving the application.

cd path/to/user-angular-app

In this command, replace path/to/user-angular-app with the actual path to the Angular project directory on the user’s system.

Step 2: Create the Production Build

To generate a production-ready build of the application, run the ng build command with the production configuration. This step is critical, as it optimizes the code for performance, creating a version that is suitable for deployment.

ng build 

Note on Angular Versions: In earlier versions of Angular, users needed to specify — prod to create a production build, like so:

ng build --prod

In Angular 12 and above, — prod is no longer required, as production configurations are now handled with ng build — configuration=production. The new command automatically applies production optimizations, aligning with Angular’s streamlined configuration system.

The production build applies several optimizations:

• Ahead-of-Time (AOT) Compilation: Angular templates are pre-compiled, so the browser doesn’t need to process them.
• Minification and Compression: JavaScript and CSS files are compressed, reducing load times.
• Tree Shaking: Unused code is removed, making the application smaller and faster.
• Bundling and Chunking: The application is split into smaller, loadable chunks, so only the required code loads initially.

Step 3: Understand the Production Build Output

Once the build completes, the optimized files are stored in the dist directory. This directory contains all the files required to run the application in production mode, making it suitable for deployment on any web server.

The structure of the dist folder looks like this:

user-angular-app/
└── dist/
    └── user-project-name/
        ├── index.html
        ├── main.js
        ├── runtime.js
        ├── polyfills.js
        ├── styles.css
        └── other assets...

• index.html: The main HTML file, which acts as the entry point to the application.
• JavaScript Files (main.js, runtime.js, etc.): The compiled and optimized JavaScript files containing the application’s logic and functionality.
• CSS Files: Minified styles that control the visual presentation of the application.

The production build ensures that the application is ready to be served as a static website, with all files optimized and prepared for fast loading.

Step 4: Install and Use a Local Server to Serve the Build

Since production builds are static files, they need a simple HTTP server to serve them locally. Unlike ng serve, which is only for development, a production build requires a static file server.

1. Install http-server
   If http-server is not already installed, install it globally using npm. This tool is lightweight and ideal for serving static files.

npm install -g http-server

2. Navigate to the dist Folder

Move into the dist directory that contains the production build files:

cd dist/user-project-name

3.Start the Local Server
Use http-server to serve the files, specifying a port (8080 in this example):

http-server -p 8080

This command launches a local server on localhost at port 8080, serving the production-ready files.

Step 5: Access the Application Locally in a Browser

With the server running, open a web browser and go to:

http://localhost:8080

This URL provides access to the production build of the application, allowing users to test it exactly as it would appear in a live environment. Running the application in production mode locally enables users to verify that it loads efficiently, behaves as expected, and is free from any issues before deploying it to a server.

4. Conclusion

Running an Angular application in production mode locally provides valuable insights into its performance and behavior in a live-like environment. By following these steps, users can create a production build, use a lightweight server to run it locally, and test the application thoroughly before deploying it. This process ensures that the application is optimized, ready for deployment, and offers a smooth user experience. By mastering this approach, developers can confidently deliver high-quality Angular applications that meet performance standards and user expectations.

By Vijay Perumalsamy

About Us:

Established in 2016, with the goal of being the company of right choice for clients, talents and solution providers. We design, develop and integrate software applications to meet the challenges of a dynamic business environment that suits our client’s needs. Today, we are one of the growing software service provider in the industry aimed at providing custom application development and suitable technical solution. Our team aspires to do quality work for our clients in providing end-to-end solutions and services at an affordable price.

Website : https://aalamsoft.com/

Follow us on,

LinkedIn : https://www.linkedin.com/company/aalam-info-solution-llp

Instagram : https://instagram.com/aalaminfo?igshid=YmMyMTA2M2Y=

Facebook : https://www.facebook.com/Aalam-Info-Solutions-LLP-775574966147738/