The Best Way To Lazy Load Angular Elements

⚡ UPDATE: Check out video presentation from Angular Zurich Meetup & the library itself!

Or any other Web Components in your Angular applications!

In this article we will be focusing on learning how to use Angular elements and other web components in the context of parent ( consumer ) Angular applications. It’s based on hands-on production ready experience from large enterprise organization with more than hundred of SPAs and libraries combined!

Angular Elements and Web Components Refresher

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps — MDN

For many years we have been building websites and simple web applications using HTML elements provided by the platform like <div> or <input/> and vanilla Javascript and it was good!

As the applications grew in complexity, community came up with web frameworks and libraries that introduced the concept of components.

A component represents a great way to implement and encapsulate complex behavior which then can…