Angular Micro Front-End

The time has come to finally put all three of our applications together as a single micro front-end application. We will be using a JavaScript technique to coordinate the display of front-ends, and in our case, we will use Angular to do this. This means that we will use our existing Angular application to set up regions within a page to inject our front-ends into.

Note: The code examples as presented here are a logical progression of concepts in building our micro front-end. If you are following along and find that something doesn’t quite work as expected, please refer to the sample code present in the last lesson of this chapter. We will be covering quite a bit of ground in terms of source code, and having a code editor open with the final version of the sample code at hand may help to understand how it all fits together.

Micro front-end DOM Containers

Our Angular application already has a header panel and a login panel that is rendered as a Material Sidenav container.

Let’s update our angular-app/src/app/app.component.html file to set up container <div> elements for our micro front-ends to be injected into as follows: