{"id":11771,"date":"2022-08-16T18:24:22","date_gmt":"2022-08-16T18:24:22","guid":{"rendered":"https:\/\/www.htmlgoodies.com\/?p=11771"},"modified":"2022-08-16T18:24:22","modified_gmt":"2022-08-16T18:24:22","slug":"ahead-of-time-aot-compilation-in-angular","status":"publish","type":"post","link":"https:\/\/www.htmlgoodies.com\/javascript\/ahead-of-time-aot-compilation-in-angular\/","title":{"rendered":"Ahead of Time (AOT) Compilation in Angular"},"content":{"rendered":"

If you have ever examined an Angular app\u2019s file structure, you would find a lot of HTML, CSS, and JavaScript templates that all work together and get compiled to render a well-crafted web application. The compilation process consists of two approaches. The first one is the Just in Time (JIT)<\/i> compilation, on which Angular relied previously. With the advent of Angular CLI (Command Line Interface)<\/i> tools, however, it is now possible to use AOT (Ahead of Time)<\/i> compilation instead, which makes it easier to optimize your Angular apps. We will discuss both of these compilation methods in detail throughout this guide.<\/p>\n

In this web development tutorial, we will be discussing the concept of these two compilation approaches, examine how AOT works with Angular code, and see its impact on the performance of the app while it runs on the browser.<\/p>\n

Let\u2019s begin by first briefly discussing the two compilation processes.<\/p>\n

Read:<\/b> Best Online Courses to Learn HTML<\/a><\/p>\n

What is Just in Time (JIT) Compilation in Angular?<\/h2>\n

Just in Time (JIT) compilation is one of the compilation<\/a> approaches Angular uses to compile code. As its name suggests, the compilation is performed at runtime when the code is running in the browser. In Angular\u2019s older versions, JIT was the default compilation option that compiled your app while it was running in the browser. When the user accessed the Angular app in their browser, it 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\u2019s interpreter. In this way, JIT performed the compilation of code as it was being delivered to the browser.<\/p>\n

What is Ahead of Time (AOT) Compilation in Angular?<\/h2>\n

AOT (Ahead of Time) is an act of compilation and it is not just specific to Angular. With this approach, as its name implies, compilation is performed before<\/i> the program runs in the browser. Like JIT, AOT also compiles high-level language code (JavaScript) into a binary code form to make it executable on the browser. It significantly decreases the efforts of the runtime engine, as it frees the interpreter<\/a> not to worry about the compilation of different website assets before they are shipped to the browser.<\/p>\n

At the end of the day, the aim of both AOT and JIT approaches is the same \u2013 to compile high-level language code into native code. The difference only lies in when the compilation occurs. With JIT, the code gets compiled at runtime, while AOT compiles the code beforehand.<\/p>\n

Advantages of AOT over JIT Compilation<\/h3>\n

AOT has some beneficial advantages over JIT. Here are a few of the most important advantages of Ahead of Time compilation:<\/p>\n