/angular2-aot-webpack

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

Primary LanguageJavaScript

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

Dependency Status devDependency Status

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.

Example for version 4 of Angular can be found in a separate branch until it gets stable

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

Further reading

Starters with AOT compilation available