Migrate from AngularJS to React

The Angular team recently announced the end of long-term support for AngularJS. Long term support (LTS) was originally planned for July of 2021, but was delayed to December 31, 2021 due to the effects of COVID-19. You can see their announcement in their blog post both discontinuing LTS and providing a transitionary path to later Angular versions for those whose teams and develop plans focus completely on the Angular ecosystem.

If you have been part of teams like mine whose expertise lies in React but are tasked with developing and maintaining an AngularJS, this post is for you. Together we’ll go over migratory steps to transition your code base from AngularJS to React.

The migration of your code base isn’t necessarily a hard one but may take time and dedication depending on the size and complexity of your current solution. Generally speaking, there are three main approaches you can take to transition away from AngularJS. These are:

1. Single-SPA
2. Iframes
3. Micro Apps

Single-SPA

This library takes reconfiguring your current solution to load in multiple apps as front-end microservices. I’m not terribly familiar with the solution as the implementation to do so with an AngularJS app proved to be too tedious at the time of migration. Most examples given are when starting apps from scratch. If there are those that can speak to a legacy migration solution, please let me know your insights in the comments below.

Iframes

Iframes apps are standalone apps that we want to run in conjunction to the parent app as sub-features, or child apps, throughout the parent app. This requires creating a new app with its’ own repository, pipeline, deployment strategies, testing environments, and domains where the app will reside. It also requires server and client-side security protocols if you only want the iframe to be accessible from the parent app.

This can be a great way to move off of legacy code and constraints while enabling your engineering team to use modern technologies and standards without having to worry about conflicts with your parent app. This can also allow you to move into a new CSS framework without conflicting styles between the parent and child apps. In order to merge the two apps together, you’ll need to:

1. Parent app creating iframes for child apps into a given page, feature, etc…
2. Create communication functions for the apps to send data back and forth if this is desired.
   • Auth tokens are a good example of cross communication functionality where you don’t want your users to have to log in a second time in order to use your child app.
3. Create shared utility and component libraries that standardize the usage and experience between all parent and child apps. This can be done through public or privately published NPM packages.
4. Implement a $location.path wrapper to share routing between the two frameworks.

Eventually if architected with replacement in mind, you could replace the legacy app with your iframe app completely once every view and component has been transferred.

Micro Apps

This solution allows you to continue with a monolithic build but restricts you from implementing modern build techniques if your current app is too complex to rewrite every portion of the app at once without creating more tech debt and unexpected failures (e.g., Moving from Webpack 3 to Webpack 5). My favorite tool for this approach is react2angular, an NPM package that embeds React apps in your AngularJS project without getting in the way of the main app maintenance or feature development.

This tool allows you to send your AngularJS services and any prop you define to your React app without having to rewrite the AngularJS components. Your React app consumes incoming services and data as props and your team is already productive from the start with little overhead. As a result of AngularJS rending React micro apps throughout your parent app, React doesn’t have the convenience of the apps sharing a single global state management solution like Redux or Context. This can slowly change as you migrate and merge more and more of the app components into your new React codebase. Another advantage in using react2angular is creating wrap smaller React components in an Angular component by name only in order to mass replace a particular feature as you are making the transition over time.

A few things to consider with this approach.

1. Although the package itself hasn’t been updated in a few years, it still works as intended with modern versions of React.
2. This package works best with AngularJS v1.5 and up. If you are on v1.2, you may have some work to do to get your AngularJS version up to 1.5.
3. This shouldn’t be your final solution since AngularJS support is now discontinued and you should aim to eventually completely remove your AngularJS codebase in favor of the React replacement.
4. Implement a $location.path wrapper to share routing between the two frameworks.

Solution

If you are looking at only new feature development, the Iframe approach may be good for you. If you want to replace current functionality of a legacy app, the Micro App approach may be the approach to best transition your app. Personally, I favor the two of them in unison. By doing so you can transition older features to a newer codebase while developing newer features in a new iframe codebase. Eventually, you can even move the react2angular Micro app code straight into the iframe app if you stay strict to both using the same shared libraries and utilities.

Possible migration flow:

1. Install react2angular and start testing small feature transitions.
2. Begin moving the service layer into a shared public/private NPM package.
3. Being replacing AngularJS npm packages with their React equivalent if needed.
4. Create child React app that will replace parent app.
   • Create parent and child communication functions.
     • Send parent auth tokens to child app.
   • Create server security rules for where and which child apps can exist as an iframe.
   • Setup child routing to match parent routing.
     • As features are iframed into the parent, both routes will match for later full transition.
5. Setup $location.path wrapper to sync AngularJS and React routing for both Micro Apps and Iframe.
6. Depending on flow, move react2angular components to iframe app.
7. Once AngularJS views and components are replaced, replace for final transition:
   • Routing
     • Root files (e.g., index.js, index.html, etc…)
   • Update Webpack settings to React based build
   • Replace all middleware services (e.g., restangular with axios.)
   • OR replace parent app with Iframe app.
8. Congratulations, your AngularJS app is gone!

There may be more or less steps depending on the complexity of your current solution and you should cater your migration strategies as such to what works best for your project or company goals.

In conclusion, as a result of starting or completing this migration, your company should see benefits both in engineering moral and empowerment to implement new technologies and staying up to date with the developer ecosystem. You can rest with peace of mind that security maintenance doesn’t fall on your shoulders without support from the official Angular development teams. As well, migrating your app will also allow you to expand your hiring base as you are no longer stuck hiring candidates in a niche and discontinued framework.

Thanks for the read and I wish you the best of luck on your migration!

Resources

• Discontinued Long Term Support for AngularJS
• Finding a Path Forward with AngularJS
• Single-SPA
• Communication between an iframe and its parent window
• react2angular
• $location.path

If you found this helpful or useful, please share a 💓, 🦄, or 🔖. Thanks!