I am trying to convert an App that was already working with Lazy loaded modules into AOT. I am using the @ngtools/webpack toolkit to compile the AOT code, however I am getti
I was struggling myself with AOT and Lazy loaded modules.
Choosing one or the other was not really an option for prod build.
Even tho I really needed those features together, I was not able to get them and had to give up. Until today !
angular-cli
made a release two days ago : 1.0.0-beta.21 which supports AOT and Lazy loading !
In your angular-cli project :
npm cache clean
npm install --save-dev angular-cli@latest
ng init
Enjoy !
PS : Big thanks to angular-cli team which made an awesome work here ... !
EDIT :
I did some benchmarks :
+-----------------------+-------------+--------------+-----------+-------------+
| | Main bundle | Chunk 0 | Scripting | First paint |
+-----------------------+-------------+--------------+-----------+-------------+
| ng serve | 4.5 MB | Not splitted | 6075 ms | 5500+ ms |
| ng serve --prod | 334 KB | Not splitted | 5587 ms | 4750+ ms |
| ng serve --aot | 3.3 MB | 326 KB | 4011 ms | 4400+ ms |
| ng serve --prod --aot | 243 KB | 18.1 Kb | 3860 ms | 4250+ ms |
+-----------------------+-------------+--------------+-----------+-------------+
(results aren't super good because I have a lot of things opened and 3 monitors and my laptop is in pain ^__^).
Here's what we can remember from that :
- The --prod --aot
build size is 27% smaller than --prod
build
- The --prod --aot
build is 31% faster when scripting than --prod
build
- AOT is cool !
- There's probably a bug without aot
flag because unless I missed something, I couldn't find the lazy loaded chunk I expected and I found the supposed lazy loaded code into the main bundle. I opened an issue on Github.