Build Micro frontends — Aggregate Angular Components in NextJS/ReactJS Application with Custom Element

Introduction

ReactJS and Angular have pros and cons, and the decision of the web framework is always a dilemma for the development team. For a developer, it’s a challenge to switch to a new framework with a steep learning curve.

What if we were allowed to develop the website by using different web frameworks in the same project?

In this article, we will discuss how to aggregate Angular components in the NextJS/ReactJS application with the custom element.

About this series

This series aims to learn different micro-frontend technologies to bridge the remote applications in different frameworks.

• Article 1 (React + Next.js): Build Micro frontends in NextJS and ReactJS with Webpack 5 Module Federation
• Article 2 (React + Angular): Aggregate Angular Components in NextJS/ReactJS Application with Custom Element
• Article 3 (React + pure HTML/NodeJS): Integrate Remote Pages as ReactJS overlay via iframe with postMessage API

Overview of this Article