Angular and React Component Inception

April 25, 2023    Architecture Angular React Web-Development

Angular and React Component Inception


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 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. is a great place to get started.


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

Watch the Story for Good News
I gladly accept BTC Lightning Network tips at [email protected]

Please consider using Brave and adding me to your BAT payment ledger. Then you won't have to see ads! (when I get to $100 in Google Ads for a payout, I pledge to turn off ads)

Use Brave

Also check out my Resources Page for referrals that would help me.

Swan logo
Use Swan Bitcoin to onramp with low fees and automatic daily cost averaging and get $10 in BTC when you sign up.