This is simple project which contains a custom Webpack 3 config for Angular 6, including support for Ahead of Time Compilation (AoT) and lazy loading of Angular modules.
I've kept the versions at Angular 6 and Webpack 3 to use as reference and experiementation, for working with an older app stuck on these versions.
Development build, doesn't implement AoT:
npm run build:dev
Example production build, without AoT:
npm run build:prod
Example production build with AoT
npm run build:prod-aot
All builds are created in the ./dist directory, but the prod-aot build is created in the ./dist/aot directory, so you can see the difference between an AoT and non-AoT build.
The config starts in ./webpack.config.js, and is split into 3 files under ./config:
- webpack.dev.js
- webpack.prod.js
- webpack.prod-aot.js
AoT is implemented using the AngularCompilerPlugin, which is part of the @ngtools/webpack npm module. This takes care of the AoT step and is only included in the webpack.prod-aot.js config. This is on version ^1.10.2, as I ran into issues running the latest version with Angular 6 and Webpack 3.
Lazy loading of Angular modules is achieved by enabling string-based module loading in the Angular routing configuration. In the development build, this is made possible by using the angular-router-loader, in the Webpack config. For production AoT, the AngularCompilerPlugin handles it for you.