Angular 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
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