Why And How To Lazy Load Angular Libraries

Tomas Trajan
8 min readApr 18, 2019
Chillax, the bundle size is right where it should be! (Original 📷 by Holger Link)

This article is based on a real life experience from a large enterprise environment with more than 60 SPAs and cca 30 libraries…

🤫 Wanna know how we can manage such a large environment without going full crazy 😵 Check out Omniboard!😉

Angular libraries are great way to organize code! Angular CLI comes with an amazing built-in support to create, build and test library projects inside of the standard workspace.

Libraries shine the most in environments with multiple Angular applications with a large potential for code reuse and composition!

Libraries can also be of great help in shops which need to spit out client projects at a high cadence! In that case the libraries can represent reusable configurable add-ons from simple ones like music player or social feed to more complex one like full blown admin with multiple sub-routes!

Libraries are currently built with the help of ng-packagr which together with the advancements in the dependency injection mechanism (providedIn: 'root' syntax ) lead to small tree-shakeable packages! That represents yet another reason to embrace libraries as a unit of shared code in the Angular ecosystem!

👨‍💻️ Concepts explained…

--

--

Tomas Trajan

👋 I build, teach, write & speak about #Angular & #NgRx for enterprises 👨‍💻 Google Developer Expert #GDE 👨‍🏫 @AngularZurich meetup co-organizer