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.
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,
ngbuild --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.
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.
46+ registered 