Build Micro Frontends using Angular Elements: The Beginner’s Guide
Front end development has grown so much over the last decade from pure HTML and CSS design to topics such as high interactivity, accessibility, testability and security. In order to meet these needs, most application teams have distinction between backend and frontend development teams.
In addition to that, the application functionality grows steadily and at a certain point, it becomes impractical to have multiple teams collaborate on a single code base.
The term “Micro Frontends” has been a buzzword for breaking up growing front-end code into easy-to-maintain parts. The frontend is divided into its multiple functions or parts. These parts are implemented and deployed by independent teams. This increases the testability, reusability and offers the possibility to select different technologies for each micro frontend.
I will stop at this point and without further ado, let’s build sample micro frontends using Angular elements.
Building Micro Frontends
We will build a sample travel booking system in this article. Let’s spin up two Angular projects using CLI: travel-booking and flight-booking.
We will need a few dependencies to build and run Angular custom elements. Install the following…
