Angular and AOT

Intro

It is a long time since i started to play with new angular (currently 5 beta). Currently i found that i know very little about AOT feature, so i think, it is good time to write a post about it.

So, What is this AOT thing about?

AOT - means Ahead Of Time Compilation, but what exactly is being compiled? after all we talking about javascript - an interpreted language which needs no compilation!
According to that it saying at angular site - the AOT is configuration that makes angular to precompile the HTML templates of components, and thus saves the the HTML processing (here is that "compilation" means in this case) from being performed at application runtime.

Sounds Like A Good Thing, So How Can I Get It In My Project?

If you use angular-cli tool for your project scaffolding it is very easy: Instead of usual

ng serve 

command, you can use

ng serve  --aot=true

command
You can see the difference in chrome dev tool:
ng serve

ng serve --aot=true

As you can see - the load time reduced to almost half size with AOT option