Understanding Of Compilation process in Angular

Posted By : Palak Sharma | 23-Sep-2017

Angular

To run any application in Angular, we require a compilation process, the components, and templates associated with the application cannot be understandable by the browser directly in which it runs. One more advantage what we have of the compilation process is of the application runtime performance i.e. it uses javascript's inline caching (VM features) to enhance the performance.

Earlier in Angular1 and Angular2 the compiler we were using is JIT, that stands for "JUST IN TIME" compiler, as if nowadays in Angular we are using AOT ("AHEAD OF TIME") compiler. Now the question arises, what is the difference between JIT and AOT? So, in order to summarize, there is basically a major difference is of performance ratio.

In comparison to JIT, a compilation in AOT is performed at runtime and it provides smaller bundle with the fast rendering of the application in the browser respectively. Using AOT we can reduce our application size too much extent in comparison to JIT. In approximately we can reduce the size to Kb's from Mb's. The execution performance is much better in AOT compilation, the key factor of AOT is moving the compilation from runtime to build process in one go.

The compilation process also gives us the opportunity to find the template bugs before actually, we run the code in the browser, so by introducing compiled code at the time of build process, it provides us the various optimization in terms of code as well as it makes the application more speedy as it provides dead-code-elimination. It also reduces the amount of asynchronous request we send from our application.

To enable AOT in angular what we can do is to import @ngTools form webpack and save it as the dependency in package.json.

"npm install -g ngtools/webpack"

 
import {AotPlugin} @ngtools/webpack;

exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: @ngtools/webpack&,
      }
    ]
  },

  plugins: [
    new AotPlugin({
      tsConfigPath: path/to/tsconfig.json;,
      entryModule: path/to/app.module#AppModule;
    })
  ]
}

ngtools/webpack works with AOT Plugin to enable AOT compilation in our application. In some of seed we can enable AOT mode by simply giving command of " ng build --aot".