Angular and React Component Inception

via GIPHY

Largest island in a lake on an island in a lake on an island | Title

Can you have a React component inside an Angular app that hosts an Angular component?

Yes you can!

Why would we want to do this?

We have an Angular app and a bit.cloud header component built in React that we want to use company wide. The Angular components that need to be in the header are complex, so I figured out how to convert them to web components with Angular then use them inside of the React header.

Lessons Learned

This was an ambitious project, but I didn’t think about how deep it would get when I was tasked with implementing the common header. As I moved through the learning phases, I discovered more and more. I considered just recreating the header in Angular, but then each update would have to be done in 2 places. We didn’t want to do that.

I’ve also been putting off learning React for years, so this was a good time to learn more about it. We won’t be re-writting this app to Angular anytime soon, but new products will probably be React (for this company) and there are others already using React. React.gg is a great place to get started.

MicroFrontEnds

MicroFrontEnds are interesting and I looked into it, but it was more complicated than we needed. I first looked at Sai ’s code and offered a few PRs.

This project shows React, Angular, Vuew and Svelte all in the same application.

Angular and React

Angular can wrap React components. I used Zacky Pickholz’s Embedding React Components in Angular (the Easy Way) to teach me how to embed a React app inside of an Angular app.

Web Components

Web Components are a great way to share components between frameworks. Angular can output web components !

Consuming Web Components in React

I started with and followed instructions from Machine Llama and his code .

This approach is different in that I put both Angular and React in the same app, instead of 2 different apps that Machine Llama has.

My example code in Github