The Angular compiler

An Angular application consist largely of components and their HTML templates. Before the browser can render the application, the components and templates must be converted to executable JavaScript by the Angular compiler.

The @NgModule metadata tells the Angular compiler what components to compile for this module and how to link this module with other modules.

The components and their associated HTML template markup, css styles, directives & pipes are compiled into component factories.

A component factory creates a pure, 100% JavaScript representation of the component that incorporates everything described in its @Component metadata: the HTML, the binding instructions, the attached styles.

See references below for more details on Angular compiler.

JIT vs AOT

So far, whenever we’ve used ng serve to serve our Angular application, the application has actually been compiled by the Angular compiler within the browser when the application first loads up. Everytime the page is reloaded the compiler recompiles the application in memory prior to the browser rendering our app. This process of run-time compilation in the browser is referred to as Just in Time compilation.

JIT compilation incurs a run-time performance penalty. Views take longer to render because of the in-browser compilation step. The application is bigger because it includes the Angular compiler and a lot of library code that the application won’t actually need. Bigger apps take longer to transmit and are slower to load. Compilation can uncover many component-template binding errors. JIT compilation discovers them at runtime which is later than we’d like.

AOT (Ahead of Time) compilation occurs during the build of the application. The shipped application contains the component factory classes and since the compilation has already happened, the Angular compilation need not be shipped as part of our deployed code.

Advantages of AOT (straight from the Angular docs) -