Lazy loading Angular components from Non-Angular applications | AEM Community Blog Seeding

Lazy loading Angular components from Non-Angular applications by Bruno Bradach

Abstract

Introduction
I have been working with Adobe Experience Manager (AEM) for almost two years and most of the time I combined it with Angular as a frontend framework. One of my first tasks as an AEM developer was to find a good way to use Angular in conjunction with the CMS platform.

Building
One of the good things of Web Components and custom elements is that you import some JS and CSS and you are ready to use them. With Angular you can run ng build --prod and import the generated bundle files in other applications to use your custom elements.

The problem
Despite there are use cases where it could be handy to have all the components bundled to a single or a few files -like design systems-, there are other cases where it is not ideal.

Lazy loading
Code splitting and lazy loading would help to tackle that problem. You can split your application into multiple NgModules accordingly.

In my case, I could split up my project by creating a separate NgModule for each of my components and one or more shared modules to share features across the whole project. Now I would only need to lazy load them in order to lazy load my components.