https://github.com/owensgit/angular-6-webpack-3-aot
Angular 6 built with a custom Webpack 3 config, with AoT compilation and lazy loading of modules.
https://github.com/owensgit/angular-6-webpack-3-aot
angular6 angularcompilerplugin aot-compilation webpack3
Last synced: 3 months ago
JSON representation
Angular 6 built with a custom Webpack 3 config, with AoT compilation and lazy loading of modules.
- Host: GitHub
- URL: https://github.com/owensgit/angular-6-webpack-3-aot
- Owner: owensgit
- Created: 2019-08-08T18:53:42.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T01:21:29.000Z (almost 3 years ago)
- Last Synced: 2025-04-04T17:50:28.796Z (6 months ago)
- Topics: angular6, angularcompilerplugin, aot-compilation, webpack3
- Language: JavaScript
- Homepage:
- Size: 1.36 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular 6, Webpack 3, AoT Compilcation & Lazy Loading
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.
### Commands
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.
### Webpack Config
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
### Ahead of Time Compliation
AoT is implemented using the **AngularCompilerPlugin**, which is part of the **[@ngtools/webpack npm module](https://www.npmjs.com/package/@ngtools/webpack)**. 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
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](https://www.npmjs.com/package/angular-router-loader)**, in the Webpack config. For production AoT, the **AngularCompilerPlugin** handles it for you.