Preparing a page to be loaded by the base application

With our micro frontend project ready, we need to prepare it to be consumed by another application. There are several ways to share micro frontends, from the simplest (and obsolete), with the use of iframes, to more modern, but complex, solutions such as module federation.

In this section, we will use an approach widely used in the market, which is the use of Web Components. Web Components is a specification that aims to standardize components created by different frameworks into a model that can be consumed between them. In other words, by creating an Angular component following this specification, an application created in React or Vue could consume this component. Although Web Components was not created with micro frontend projects in mind, we can see that its definition fits perfectly for what we need.

Like almost everything in the Angular framework, to create this type of component, we don’t need to do it manually...