Introduction to ng build and Importance of base href in angular 6

Introduction
The build is the process of compiling all source code for creating executables which are ready to be deployed. Building an application also optimizes it, which matters a lot for the production environment. ng build command is used to build the application in angular 6.

On the local system, it may not be required to build an angular application ie we may simply run through ng serve. But to deploy the application we should build it, as it reduces the size of many files. We may choose the profile to be selected for a build. 

The profile is normally one of the following
1. development (dev)
2. stage
3. production (prod)

There must be two extra files which must exist in parallel to environment.ts, which can be used for dev environment. So In our case, the file names should be environment.prod.ts and environment.stage.ts

Angular apps run in development mode by default. When we switch to production mode it runs faster by disabling  development time checks such as the dual change detection cycles. 

When production builds is enabled via --prod command line flag, the runtime production mode is enabled as well. 

As a result of the build process, a dist folder is created in the root of the application. the contents of this dist folder can be uploaded to any http server. 

I copied the whole dist folder and pasted inside the web apps folder of tomcat. 

In our case we faced the following issue:

Unable to load the following script-

1 main.js
2 polyfills.js
3 styles.js
4 runtime.js
5 vendor.js

This was happening because base href in index.html had the following value-
<base href="/">

so the js files were being searched in the root of the server ie let us say http://abc.com, instead of the root of the application. The issue was resolved by the following line-

<base href="./">

Conclusion:

In this article, We learned the following-
1 Introduction and significance of building an angular app
2 The significance of base ref

Take note that this article did not cover the entries of specific environment files as well as the entries to be made in angular.json files for the profile settings to be applicable.

Hope this helps

reference
https://stackoverflow.com/questions/45158095/angular-ng-build-with-different-profiles
https://shekhargulati.com/2017/07/06/angular-4-use-of-base-href-and-deploy-url-build-options/
https://angular.io/guide/deployment