Running React inside Angular
Migrating hundreds of thousands lines Angular app to React sounds like an impossible task right? Here’s how we moved our existing Angular app to React shipping code incrementally from day 1.
Last year we made the choice to switch our GoToConnect VoIP (Voice over IP) and video conference app from Angular to React. We were already in the process of upgrading from Angular 1 to Angular 6, however the rest of our business was using React so it made sense for our team to use React as well.
Pausing development, or even slowing down, for a major rewrite was not an option; we have thousands of existing customers and a very aggressive delivery schedule.
We came to the solution of gradually adding new features with React and converting other parts of the app as needed. In a traditional React application, the app is rendered in a root `div`. This solution will render a new React application inside of an Angular component as opposed to a root `div`.
The code
First we wrote an Angular component wrapper which takes care of loading the React bundle asynchronously and unmount it when it is no longer needed:
If we want to render a React chat component, for example, and pass along some important props, the Angular component will load the React bundle asynchronously and once loaded, the chat component will be rendered.
Finally we created the entry point for the React app. This is the same “entry” you would specify in your Webpack config, and it will create a separate bundle for your React code:
Conclusion
A really nice feature of this approach is that we can pass a reference to the Redux store directly from Angular into the React component. We even have live video streams rendering simultaneously in Angular and React!
There’s a cost to running three frameworks at the same time, increasing the amount of code the client has to download and execute, but we mitigated this with async bundle loading and aggressive service worker caching; you only download React if you use a part of the app that needs it. But given the benefits this approach provides, these were tradeoffs we were willing to make.
