If you’ve ever looked at the file structure of an Angular application, you’ll find plenty of HTML, CSS, and JavaScript templates that all work together and compile to render a well-designed web application. The compilation process consists of two approaches. The first is the Just in time (JIT) compilation, which Angular previously relied on. With the advent of Angular CLI (Command Line Interface) tools, however, it is now possible to use AOT (in advance) compile instead, making it easier to optimize your Angular apps. We will discuss these two compilation methods in detail throughout this guide.
In this web development tutorial, we’ll discuss the concept of these two compilation approaches, examine how AOT works with Angular code, and see its impact on application performance when running in the browser.
Let’s start by briefly discussing the two compilation processes.
Lily: Best Online Courses to Learn HTML
What is just-in-time (JIT) compilation in Angular?
Just-in-time (JIT) compilation is one of the compilation approaches that Angular uses to compile code. As the name suggests, compilation is done at runtime when the code is running in the browser. In older versions of Angular, JIT was the default build option which compiled your app while it was running in the browser. When the user accessed the Angular application in their browser, they fetched all the required files from the server and then compiled the JavaScript code into binary code format, which could then be executed by the browser’s interpreter. In this way, JIT compiled the code as it was delivered to the browser.
What is Ahead of Time (AOT) compilation in Angular?
AOT (Ahead of Time) is an act of compilation and it’s not just specific to Angular. With this approach, as the name suggests, the compilation is performed before the program runs in the browser. Like JIT, AOT also compiles high-level language (JavaScript) code into a form of binary code to make it executable on the browser. This greatly reduces the effort of the runtime, as it frees the interpreter from having to worry about compiling the various website assets before they are sent to the browser.
Ultimately, the goal of both AOT and JIT approaches is the same: to compile high-level language code into native code. The difference is only in when the compilation happens. With JIT, the code is compiled at runtime, while AOT compiles the code beforehand.
Advantages of AOT over JIT compilation
AOT has some beneficial advantages over JIT. Here are some of the most important benefits of Ahead of Time compilation:
- With AOT, developers have smaller app sizes to serve to the browser. AOT compilation reduces the size of the Angular framework to half its size and therefore the application to be served also becomes smaller.
- Programmers have the advantage of rendering applications faster. The reason for this fast rendering is that the compilation done just before rendering the application is now done much earlier with AOT.
- Ahead of Time compilation helps catch errors at an earlier stage. In fact, with JIT you can skip code that is not optimized but seems to be working fine at the time, but later when running the application the code can lead to detrimental output.
- AOT bundles HTML and CSS in a pre-compiled form. This makes it more difficult to reverse engineer the process. In this way, AOT compilation also improves the security of web applications and makes it more difficult for hackers to inject malicious code into the user’s system.
Lily: Project management tools for web developers
How to use AOT to compile Angular apps
One of the easiest ways to write an Angular application is to use the Angular CLI tool. Web developers can create templates, services, directives, and modules directly from the command line using the CLI. Programmers can also use webpack, which is a bundle manager for writing project templates, to create awesome project templates with all the features mentioned above. If you don’t want to use Angular CLI or if your project is not compatible with Angular CLI, you can always create AOT-compliant project templates using @angular/platform-server node bundles.
You can install Angular on your system using the command line and the following command. If you already have Angular installed, skip to the next step:
npm install -g @angular/cli
If you are a Mac user, use soda as a prefix in the command.
After successful installation of Angular CLI, open the terminal and run the following command to create a new project. You can name the project any name you like; here we call it: aotdemoapp:
ng new aotdemoapp
Before we go any further, let’s see how Angular does compilation without AOT. After successful project creation, you can run it without AOT using below command:
ng serve
After entering this command, your application should be running. Open your browser and point to the web address: https://localhost:4200. Next, open your browser’s developer tool and navigate to the Network tongue. Carefully analyze the files being downloaded and also check their size. The Network should look like the following image:
Screenshot showing project file sizes without AOT
In the next step we will run the Angular application with AOT option.
To enable AOT mode in the latest version of Angular, you need to set the value of not property at true in your build configuration, specified in the angular.json case. After that run the project using the ng serve ordered.
This time your Angular application may take a bit longer to compile. However, if you are using a fast computer and the application size is relatively small, the latency may not be noticeable. As the application grows, this latency can become apparent, regardless of your computer’s configuration and specifications.
Note that your application is now running in AOT mode. press the refresh in your browser and reload your application again. Observe the files and file sizes in the Network your browser’s debugging tool tab:
Screenshot showing project file sizes with AOT
If you compare the two screenshots, you will find that the application size shown in seller.js is almost half the size in AOT mode. And now, because the application is precompiled in AOT, the main.js the file is larger than it is without AOT mode. Also, the app runs faster – almost twice as fast.
When to use AOT compilation in Angular?
AOT can be used for both development and production environments. However, it is not recommended to use AOT mode to run applications during the development phase. The reason for not using the AOT option in the development phase is that it causes a delay in the bundling process to generate files for rendering. Due to this, the rendering time of web pages increases. Once the development phase is almost complete and all the validation issues related to the AOT have been resolved, then AOT can be used effectively in the development environment.
It is always recommended to use AOT for production builds. Angular CLI also enforces rules to use the AOT option whenever the application is running in a production environment.
Final Thoughts on Compiling Ahead of Time in Angular
Currently, Ahead of Time compilation is the preferred approach for compiling and deploying code. If you are an Angular developer and not taking advantage of the benefits of AOT, you should not ignore its benefits. You will not only get the performance related benefits, but it will also help to make the code clean and flawless. As of now, its integration into Angular CLI makes it hard for Angular developers to ignore using AOT approach.
Learn more about Angular web development tutorials.
