How to bundle an Angular app for production?

28 May, 2020
IntroductionBefore deploying the web app, Angular provides a way to check the behavior of the web application with the help of a few CLI-commands. Usually, ng serves command is used to build, watch, and serve the application from local memory. But for deployment, the behavior of the application is seen by running ng build command.
Difference between ng serve and ng build
StepsBefore following the steps to deploy the application, make sure that Angular CLI is already installed in the system if it is not then run the following command.
npm install -g @angular/cli
The very first step would be to bundle up an application for production before its deployment.
Navigate to project directory.cd project-folder
cd project-folder
Run ng build command in Angular CLIng build --prod 
ng build --prod 
To get the preview of the application, run the following command:ng serve --prodThis starts a local HTTP server with production files. Navigate to http://localhost:4200/ to view the application.With these steps, the application is ready for deployment.
ng serve --prod
This starts a local HTTP server with production files. Navigate to http://localhost:4200/ to view the application.With these steps, the application is ready for deployment.
Approachng build command compiles the Angular app into an output directory named dist/ at the given output path. This command must be executed from within the working directory. The application builder in Angular uses the webpack build tool, with configuration options specified in the workspace configuration file (angular.json) or with a named alternative configuration. A “production” configuration is created by default when you use the CLI to create the project, and you can use that configuration by specifying the —configuration="production" or the --prod="true" option.
The –prod flag activates many optimization flags. One of them is –aot for Ahead Of Time compilation. Your component templates are compiled during the build, so TypeScript can detect more issues in your code. You can compile in dev mode but still activate the –aot flag if you want to see this error before building for prod.
dist/ FolderThe dist folder is the build folder which contains all the files and folders which can be hosted in the server.The dist folder contains the compiled code of your angular application in the format of JavaScript and also the required HTML and CSS files.Inside dist/ folder
Performance: Dynamic applications didn’t always perform that well. Complex SPAs could be laggy and inconvenient to use due to their size.
Steep learning curve: As AngularJS is a versatile instrument, there’s always more than one method to finish any task. This has produced some confusion among engineers.
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular File Upload
Angular | keyup event
Define ng-if, ng-show and ng-hide
Angular PrimeNG Dropdown Component
What is AOT and JIT Compiler in Angular ?
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
REST API (Introduction)