A Brief Intro to Ahead-of-Time (AOT) Compilation in Angular

A Brief Intro to Ahead-of-Time (AOT) Compilation in Angular

Angular code is mainly made up of HTML templates and TypeScript components, but for Angular applications to run in the browser, they have to be compiled to JavaScript code.

Introduction

Angular code is mainly made up of HTML templates and TypeScript components, but for Angular applications to run in the browser, they have to be compiled to JavaScript code.

There are two main ways of compiling Angular code to JavaScript.

  1. Just-in-time (JIT) compilation — This is when the code is compiled in the browser at runtime.
  2. Ahead-of-time (AOT) compilation — This is when the code is compiled as part of the build process, hence the name ahead-of-time.

Starting with Angular version 9, the default compilation of choice is AOT. This means that whenever you build your Angular application for production with the command ng build --prod, the application will also be compiled as part of the build process.

*Note: *For Angular version 8 and older, to compile using AOT, use the command ng build --prod --aot=true.

Advantages of AOT compilation

At this stage, you might be wondering what AOT has to offer. Below are some advantages of AOT compilation over JIT compilation.

  • Faster rendering of your Angular application — With AOT, the code is compiled during the build process. Therefore, the browser loads executable code that is ready to be rendered immediately. Very fast!
  • Smaller Angular application size — There is no need to download the Angular compiler since the application is already compiled. If the compilation is to happen in the browser at runtime like in JIT, the Angular application is shipped together with an Angular compiler. The compiler is roughly half the size of Angular itself. Pretty heavy right?
  • Better code quality — This is because template errors are detected early as the application compiles as part of the build process.
  • More secure and robust applications — That’s because the HTML templates and TypeScript components are not evaluated dynamically at runtime in the browser. This leads to fewer opportunities for injection attacks.

angular typescript software-development front-end-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Offshore Software Development - Best Practices

To make the most out of the benefits of offshore software development, you should understand the crucial factors that affect offshore development.

5 Core Criteria for Selecting Software Development Company - TopDevelopers.co

Check out these five criteria for the selection of your software vendor, and you will never regret having the wrong quality product made for you.

Wrestling Betting Software Development | WWE Betting Software Developers

Wrestling betting software development solutions from expert Wrestling betting app and software development company delivers ultimate betting experience. Chat with us.

Everything you need to know about custom software development

Take advantage of the latest technologies to boost your custom software development. For end-to-end cross-domain development, developing solutions for critical business processes and enterprise

Developer Career Path: To Become a Team Lead or Stay a Developer?

For a developer, becoming a team leader can be a trap or open up opportunities for creating software. Two years ago, when I was a developer, ... by Oleg Sklyarov, Fullstack Developer at Skyeng company