Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024

How to bundle an Angular app for production?

Author Rubleen Kaur
0 upvote
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

We are assuming that you have pre-installed or set up your Angular CLI and created a brand new angular application. Before moving on to the deployment of the application, you will learn that Angular provides a way for checking the behavior of our application using the help of a few CLI commands. 

Let’s learn more about the available commands to bundle an angular application.

Commands 

 

The two of the frequently used commands to bundle an angular application is -

  • ng serve:  The ng serve command is used to develop our application locally. The command starts up a local development server, which will serve our application when creating it. When the server is running, the command automatically reloads if a file is modified, making the development process quick and easy. 

 

If you run this command in your application, you will get a similar result.

  •  ng build: This command compiles an angular application/library into an output directory named dist at the given path. This command is used when you're ready to build our application and deploy it. The CLI analyzes the application and makes the files while optimizing it to its best. 

 

 

These are the two commands we will focus on in this article to bundle an angular application.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Difference between ng serve and ng build command. 

We have briefly described the commands, but we have two commands- there must be some difference between them, right?

Let's go through the difference between the ng serve and ng build command to understand which to bundle an angular application.

ng serve 

ng build

The ng serve command is used for fast, local and, iterative development and building, watching, and serving the application through a local CLI development server. This command compiles an angular application/library into an output directory named dist at the given path. This command is used when you’re ready to build our application and deploy it.
This command does not generate any output folder. The ng build command generates the output folder as -dist/.
The command builds artifacts directly from memory for a faster development experience. The command generates output files for once and does not even serve these files.

 

 

Deploy and Run your Angular Application

 

We have seen the two commands you will need to bundle an angular application, but we need to make sure that the Angular CLI is already installed in our systems, use the command to install the CLI. to follow the given command.

npm install -g @angular/cli


This command is used to install all the dependencies required for running an angular application in our systems.

Now, let's get back to the steps you need to follow to bundle an angular application. The first step is to navigate to the project directory. This means to open the application using the cd command in your terminal. 

cd project-name

 

The next step is to run the application; for that, you can use the ng build command, 

ng build  --prod

 

Now the final step is to confirm if your application is running fine. How will you ensure that? By having a preview of the application, for the same, you need to run the given command in the CLI/Terminal.

ng serve --prod 

 

This command will start a local HTTP server and, you can navigate to localhost:4200 to preview the application. Now using these commands out, the application is ready to get deployed.

The dist folder

 

We have run the application successfully, but how are these commands working aren’t you curious enough to know this? The ng build command compiles the app into an external output folder dist/. 
This command is to be executed within the working directory. 

 

The above picture shows the structure of the folder of the dist folder.

 

The application builder in Angular uses a webpack build tool that configures the workspace configuration file. When creating an application using CLI, a production configuration is made by default. To understand this folder better, let's go through the various folders. 

This dist folder contains the compiled code for the application in Js, and the required HTML and CSS files are also present.

Inside our dist folder, 

Folder/File

Description

assets The asset folder contains resources copied from the Angular CLI assets configuration.
index.html The index.html file is the entry point for the application.
main.[hash].js This file contains the entire bundled application.
polyfill.[hash].bundle.js This file contains all the polyfill dependencies
runtime-[es-version].[hash].bundle.js This file contains the webpack loader
style.[hash].bundle.css This file contains the style definitions

 

In this article, we have learned about the two commands used to bundle an angular application. Let's go through some frequently asked questions.

Frequently Asked Questions

 

1.Why is the ng serve command?
The ng serve command is used for fast, local, iterative development and building, watching, and serving the application through a local CLI development server. This is one of the commands we can use to bundle an Angular application.
 

2. How can we install the AngularJs CLI?

To install Angular CLI is already installed in our systems. For that, follow the given command.

npm install -g @angular/CLI

This command will install all the dependencies required for running an angular application in our systems.
 

3. What are all folders included in the dist folder?

After the execution of the ng build command to bundle an angular application, an external folder for output is created that is the dist folder; now, this folder contains multiple folders, which are:

1. Assets

2. index.html

3. main.[hash].js

4. polyfill.[hash].bundle.js

5. runtime-[es-version].[hash].bundle.js

6. style.[hash].bundle.css

 

Key Takeaways

Hey everyone, so let's brief about the article describing how to bundle an angular application for production. 

  • This article has explained how to bundle an Angular Application using the two commands. 
  • In detail, we have discussed the two commands - ng build, and ng serve. 
  • Further, we have seen the difference between these commands and wrapped our learning session with some frequently asked questions.

Read more, gzip command in linux

Isn’t Web Development engaging? Building new websites and using amazing animations and different APIs, don’t be scared if you cannot grasp the hold of this vast development. We have the perfect web development course for you to make you stand out from your fellow developers. 

Happy Learning Ninjas!

Previous article
AngularJS References
Next article
Adding multiple functions in one ng-click Directive
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass