Lazy Load & Code Split Angular Components

Ever had the problem of finding a neat solution to code split & lazy load components in Angular? I did.. so for a couple of projects I’ve used a framework piece which allows easy lazy loading of a component. Since I’ve found it pretty useful (and I haven’t been able to find an existing similar package), I decided to open source it and release an npm package; ngx-loadable-component.

If you want to skip the niceties, npm package is here and a demo is here.

Why an Angular loadable component package

Something Angular handles super well is the ability to code-split and lazy load routes. This is all fine and well when you have route/view centric code you want to chunk, but doesn’t (easily) support the same for individual components. The problem I had was importing shared components (often from external ‘js only’ libraries) and not having them included in any shared bundles.

Luckily, people smarter than I figured out how to utilise the simple route lazy-load functionality of Angular at a component level. Ingeniously, this method tricks the Angular compile into thinking ngx-loadable-component modules are actually routable modules. This is better than some other cool alternatives as it doesn’t require any build process changes and is fairly transparent. Additionally, it means an ngx-loadable-component can be fairly easily ejected and used as a ‘normal’ component module.

Will Angular elements replace this

Simply put, quite possibly. But, as mentioned previously, this package requires no build changes or any other modifications to the ‘standard’ Angular CLI processes. It is quite possible that Angular Elements will be alot easier to combine and code split with Angular 7 (or 8 🤷‍)… but until then, this package can handle it. Also, if you decide there’s a better way to code split & lazy load, its fairly easy to eject the use of ngx-loadable-component.

Get ngx-loadable-component

If your interested, check out the package on npm. Any feedback, issues .etc feel free to raise a ticket on github, or contact me via twitter @danharris_io.