Compile Angular Application

javascript Oct 20, 2019

Compilation options for Angular applications

Deploying Angular applications is very simple and easy. In real-time scenarios, the build and deploy commands are integrated into the build pipelines. A common practice is to have a single Angular project running in one repository. However, we can also run multiple projects in a single repository.

In this section, we will first learn about various compilation options we can consider for the deployment of our Angular applications. In the sections to follow, we will learn how to deploy a standalone application and also how to deploy composite Angular applications. Before we learn how to deploy our app, it's important to understand what happens when we build the application source code.

Angular has two compilation options, which are applied based on the commands and meta flags we use:

  • Just-in-time compilation
  • Ahead-of-time compilation

What is just-in-time compilation?

The Angular just-in-time (JIT) compilation refers to compiling the code in the browser at runtime. This is the default behavior whenever we run the ng build command

ng build

This mechanism will add overhead to the request and Bootstrap time. The changes are reflected during runtime in our browser, which is great when developing an application. This option allows developers to quickly test changes while developing.

What is ahead-of-time compilation?

Angular's ahead-of-time (AOT) compilation means compiling the source TypeScript code, components, Angular HTML, libraries, and modules into the native JavaScript so that it can run on any browser smoothly. In other words, Angular will covert the code before it's downloaded by the browser.

Let's take a look at some of the benefits of AOT:

  • Better security
  • Faster rendering
  • Smaller framework and application size
  • Finds errors well in advance

Ahead Of Time or just AOT compilation is applied by default when we run the ng build --prod meta flag:

ng build --prod