Angular AOT (Ahead Of Time) compilation with the Angular CLI Webpack plugin

This repository shows how to use the Angular CLI Webpack plugin (@ngtools/webpack) to achieve AOT offline compilation.

It can also work with the new @utlimate/aot-loader package and has very similar configuration. See example in separate branch.

If you prefer the command line tool (ngc) provided by Angular, it can be found in a separate repository.

The application consists of a module (src/app/modules/main.module.ts) and a basic component (src/app/components/hello-world.component.ts) with template (src/app/components/hello-world.template.pug) and component specific style (src/app/components/hello-world.style.sass).

When the application starts (npm start) it generates the compiled files in memory and replaces the bootstrap logic to use the generated NgFactory files.

The application is bundled with Webpack from the main file and is available on http://localhost:9000.

Advantages

• Custom file types available for templates and styles through Webpack loaders (sass, pug,...)
• No separate process for compilation
• Watch mode for AOT compiled files
• No need to maintain AOT version of bootstrap file
• No output to disk for separate *.ngfactory.ts files during compilation

Disadvantages

• Need to wait for new versions after Angular release to Angular CLI repository catch up
• Not good for AOT compatible package publishing, because it doesn't output separate compiled files

Known issues

• AOT related issues
• AOT Webpack plugin related issues

Further reading

• Ahead-of-Time Compilation - official
• Multiple solutions for Angular Ahead of Time (AOT) Compilation
• Ahead-of-Time Compilation in Angular 2
• Building an Angular 2 Application for Production
• Demystifying Ahead-Of-Time Compilation In Angular 2

Starters with AOT compilation available

• Angular CLI
• Angular Seed
• Angular Universal Starter