- The generated source code can start running just after downloaded into the browser, no previous steps are needed.The AOT compilation turns this HTML templateinto this runnable code fragment.Benefits of AOT compilationSmaller application size (Angular compiler excluded)Faster component rendering (already compiled templates)Template parse errors detected earlier (at build time)More secure (no need to evaluate templates dynamically)For AOT compilation we need some tools to accomplish it automatically in our build process.
- The @angular/platform-browser doesn’t include the compiler, making a huge gain in file size.After generating the AOT compiled Typescript files another step is needed where we bundle the application.AdvantagesIt can always be used with the newest version of Angular just after it has been releasedAfter compilation any kind of bundling tool can be usedOutputs metadata files for library developmentDisadvantagesOnly supports HTML in templates and CSS in styles.No watch mode yetNeed to maintain AOT version of the bootstrap fileExample repositoriesSolution 2: @ngtools/webpack pluginThe next package @ngtools/webpack is a plugin for Webpack 2 published as part of the Angular CLI repository.
- It also searches for the entry point and transforms the bootstrap file automatically to become suitable for AOT compiled files.The loader inside the rules property enables to use any kind of file type inside the component’s decorator templateUrl and styleUrls property.For example SCSS, LESS for stylesheets and PUG for templates.
- Also lazy loaded modules on routes transpiled to import statements and the sub-modules are also AOT compiled with the main application.This loader basically does the job of awesome-typescript-loader + angular-router-loader + angular2-template-loader and adds AOT compilation to the chain.AdvantagesCustom file types available for templates and styles through Webpack loaders (SCSS, PUG,…)No separate process for compilationWatch mode for AOT compiled filesNo need to maintain AOT version of bootstrap fileNo output to disk for separate *.
- AdvantagesSame advantages as for the Angular CLI packageCompatible with Angular 4DisadvantagesCan only be used with Webpack 2Not good for AOT compatible package publishing, because it doesn’t output separate compiled filesExample repositoriesSummaryIt doesn’t matter which solution you choose, your application can greatly benefit from AOT compilation through size and speed.