Compilation in Angular

A complete guide to understand what happens behind the scenes during compiling of the Angular application

Photo by Arnold Francisca on Unsplash

Let us first understand ways to compile an Angular application and then dive into types of compilation modes in Angular.

An angular application can be compiled by using the following two commands in Angular CLI.

1. ng-serve
2. ng-build

Similarities:

1. Both the commands compile the application and produce development build by default. In development build, compiled files doesn’t have any optimization done by Angular.
2. Both do bundling of all the files present in the application. Bundling is the process of combining all the files to the single file. It is one of the optimization process done by Angular. In this process it produces 5 types of bundled JavaScript files along with their source map files by default. These files will be embedded in index.html file which is loaded by the browser.

1) inline.bundle.js — Contains the scripts which are necessary for WebPack to run.

2) polyfills.bundle.js — Contains the scripts in order to make the application compatible to different browsers.

3) main.bundle.js — Contains code present in all the files of application.

4) styles.bundle.js — Contains styles used by the application.

5) vendor.bundle.js — Contains all Angular + 3rd party libraries in it.

Bundle files which were produced during compile time and were embedded in index.html

Browser loading the bundle files

3. Both produces development build by default.

Differences:

1. ng-serve: Compiles and runs the application from the memory and as a result it is only used during the development process. It doesn’t write the build files to any folder. Hence this process cannot be used to deploy in another server.
2. ng-build: Compiles the application and produces the build files to an external folder. The name of the output folder is decided by the value of outputPath property present in the ‘build’ section in ‘angular.json’ file. As a result this output folder generated at the end can be used to deploy in any external server.

“outputPath” property present in angular.json

In Angular, we have 2 modes of compilation:

1. JIT (Just In Time) Compilation

2. AOT (Ahead of Time) Compilation

Until Angular 8, JIT compilation is the default compilation. Since Angular 9, AOT Compilation is the default mode of compilation. When the ng-serve or ng-build command executes, type of compilation depends on the ‘aot’ value present in the respective sections in ‘angular.json’ file.

aot property which decides the type of compilation in both ng serve, ng build

Also AOT compilation can be done using Angular cli by setting ‘aot’ flag to true in Angular CLI

1.ng serve — aot=true

2.ng build — aot=true

1. JIT Compilation:

As the name suggests, compilation is done during the run time of application. Browser downloads the compiler along with application files. Compiler is about 45% of the size of vendor.bundle.js file which was loaded in the browser.

Disadvantages:

1. User has to wait for the compiler to load in the browser first and then application loads. Hence waiting time is increased.

2. The size of the application is increased due to presence of compiler which will effect the overall performance of the application during runtime.

3. In this, template binding errors were not detected i.e. the compiler doesn’t throw any error during the build process.

2. AOT Compilation:

In this process, compilation is done during the build process and compiled files which were bundled, downloaded by the browser. As compilation is already done, vendor.bundle.js file doesn’t contain compiler code and hence it’s size decreases by nearly 50%.

Advantages :

• Faster rendering of application with AOT as the browser downloads only pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.
• Smaller downloading size of application. There’s no need to download the Angular compiler if the app is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.
• In this, template binding errors were detected during build process of the application. Hence template errors were identified earlier.

‘Source-map-explorer’ is a tool which is used to inspect the JavaScript bundles. This tool analyzes the source map generated with the bundle and draws a map of all dependencies. It can be installed in Angular project by following command in CLI.

npm install source-map-explorer — save-dev

Once the tool is installed, do the development build using ng build command Once the build is completed, execute the following command.

node_modules\.bin\source-map-explorer dist\vendor.bundle.js

The above command runs the source-map-explorer against the vendor bundle and we see the graph of it in browser. Notice the angular compiler is around 45% percent of the bundle size.

Memory map of dependencies present in vendor.bundle.js file during JIT compilation (compiler is included) which occupied 45.3% of size of file.

Now run the above command after executing AOT compilation command in Angular CLI. We observe that the overall size of vendor.bundle.js file reduced by half.

Memory map of dependencies present in vendor.bundle.js file during AOT compilation

Hence AOT compilation is very much recommended during the deployment of application in a production server.

Thank you very much for reading to me, and thank you for your time :)