Angular 2 Bootstrapping Options - AOT vs JIT

Question

Just kick started with Angular 2.

1. What are the various Bootstrapping options in angular 2?

2. Why is that when I make a change and refresh the index.html takes little time to retrieve the HTML markups?

3. Differences between them

Answer 1

There are two options

1. Dynamic bootstrapping

   • compiler used JIT (Just in Time).
   • dynamically compiles the ts files in the browser.
   • this is the reason the index.html takes little time to retrieve the markups.

   • main.ts contains the following

     import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
     import { AppModule }              from './app.module';
     
     platformBrowserDynamic().bootstrapModule(AppModule);
     

     2. Static bootstrapping
   • compiler used AoT (Ahead of Time).
   • The ts files are compiled into js files and then rendered to the browser.
   • By this, a set of js files containing modules and factories are created there by making them light weight.
   • Mostly used in the case of mobiles and legacy networks.

   • main.ts contains the following

     import { platformBrowser } from '@angular/platform-browser';
     import { AppModuleNgFactory }              from '../aot/app/app.module.ngfactory';
     
     platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
     

Differences

Answer 2

In Angular there are two ways of compilation

• JIT - Just-in-Time Compilation AOT
• Ahead-of-Time Compilation

I would like to add four major differences when it comes to JIT vs AOT compilation

|----------------------------------------|---------------------------------------------|
|                    JIT                 |                   AOT                       |
|----------------------------------------|---------------------------------------------|
| JIT compilation as the name implies,   | AOT compilation compiles the application at |
| compiles  the application Just in Time | build time                                  |
| in the browser at runtime              |                                     |
|----------------------------------------|---------------------------------------------|
|For JIT compilation the browser needs to| AOT compilation it does not have to         |
|download the angular compiler           |                                             |
|----------------------------------------|---------------------------------------------|
|While the application is being JIT      | With AOT, the application is precompiled    | 
|compiled in the browser, users have     | so there no such wait                       |
|to wait                                 |                                             |
|----------------------------------------|---------------------------------------------|
|With JIT compilation, the template      | With AOT compilation we will come to        |
|binding errors are only know at runtime | now about them at build time.               |
|----------------------------------------|---------------------------------------------|   

By default, the following2 commands use JIT compilation

ng build
ng serve

With either of these command we can use - -aot option to turn on AOT

ng build --aot
ngserve --aot

To turn off ACT for the production build, set - - aot option to false

 ng build -- prod --aot false