Introduction

Introduction

Before 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, the 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 the ng build command....

Steps to Install & Configure Angular CLI

Before 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....

Approach

The ng 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....

Project Structure

Folder/File Description assets The folder contains resources copied from the Angular CLI assets configuration. index.html index.html file is the entry point for the application. main.[hash].js The file contains an intended bundled application. polyfill.[hash].bundle.js It contains polyfill dependencies runtime-[es-version].[hash].bundle.js It contains webpack loader style.[hash].bundle.css It contains the style definitions...

Demerits of Angular

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....

Difference between ng serve and ng build

ng serve ng build The ng serve command is intended for fast, local, and iterative developments and also for building, watching, and serving the application from a local CLI development server.intentional The ng build command is intentionally for building the apps and deploying the build artifacts. The command does not generate an output folder. The output folder is – dist/. The ng serve builds artifacts from memory instead for a faster development experience. The ng build command generates output files just once and doesn’t serve them. Enabled by default, detects changes in source files and automatically rebuilds and reloads the application in the browser. Not enabled by default, requires the –watch flag to rebuild the application on file changes. Suitable for local development and testing purposes. Intended for deploying the application to a web server or hosting platform....