aitboudad / angular2-aot-webpack

Angular 2 AOT (Ahead Of Time) offline compilation example with Webpack

Angular 2 AOT (Ahead Of Time) offline compilation example with Webpack

This repository shows how to use the Angular command line offline compiler ngc with Webpack.

If you prefer the Webpack plugin provided by the Angular CLI, 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.html) and component specific style (src/app/components/hello-world.style.css).

When the application starts (npm start) it generates the compiled files next to the modules and the components(*.ngfactory.ts).

There is a different entry point for the JIT compiled(src/app/bootstrap.ts) and AOT compiled application(src/app/bootstrap.aot.ts).

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

Advantages

• Can always be used with the newest version of Angular
• Can output separate compiled files for AOT compatible package publishing

Disadvantages

• Works only with HTML and CSS, other file types need a previous build step
• No watch mode yet, must be done manually (bin/ngc-watch.js) and compiles all the files
• Need to maintain AOT version of bootstrap file
• Needs cleanup step before compiling

Known issues

• AOT related issues

Further reading

• Ahead-of-Time Compilation - official
• 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 2 Seed
• Angular 2 Universal Starter