angular-react

2022 - 2023

A library for using Angular in React and React in Angular.

Until 2022, I had never worked with React. I had written multiple website in Angular, and some in Vue.

But the dynamic nature of React and its natural ability to pass children as props, and it's minimalistic API, made me choose it for the BubblyDoo renderer. I quickly saw how it solved or avoided many of the problems I had with both Angular and Vue, and as such I quickly became very familiar with it.

After a while, it became clear that React was a better choice for the BubblyDoo website as well, for many reasons. But, due to time constraints, it was not possible to spend months rewriting everything in React. It would have to be a gradual transition.

This is why I started writhing this library: to allow us to use React components in Angular, and vice versa.

It was a difficult challenge, leading me down the

Angular

and React codebases,

fixing a React bug

, and learning a lot about both frameworks. The library uses

its-fine

to bridge Angular and React contexts (of which I also solved

some bugs

), and overrides some

Angular internals

to make it work. In the end, using it can still be challenging if you want to do a lot of dynamic rendering, but it worked out great.

The library allows you to write code like this:

<react-wrapper
  [component]="Button"
  [props]="{ children: 'Hello world!' }"
/>

function ReactComponent({ text }) {
  return <AngularWrapper component={TextComponent} inputs={{ text }} />
}

But it also supports more complex use cases, like multiple-level nesting.

There were multiple challenges:

Angular is just a much more complex framework than React. Inputs, outputs, change detection, zones, component factories and resolvers, modules, views and viewRefs, etc. all have to be handled. Injectors more complicated than React contexts.
In Angular, there are no virtual DOMs, and in order to handle components they first need to be rendered to a DOM element. This prevents us from rendering everything at once.
Making sure not everything was fully re-rendered when a prop changed. In the end I made a createRoot-like function which uses portals to render passed React children in an Angular component.
Probably a lot more things I forgot.

I also wrote

this blogpost

about it, if you would like to read more.

🔧 Angular🔧 React

Hans Otto Wirtz

angular-react