How to Migrate from AngularJS to React

TL;DR

• Bottom line: Use an incremental, bottom-up migration strategy with react2angular to embed React components inside your AngularJS app, converting leaf components first and working up the component tree until AngularJS can be fully removed. [src2, src4]
• Key tool/command: npm install react2angular react react-dom prop-types
• Watch out for: Attempting a full rewrite instead of incremental migration — this is the #1 cause of failed migrations, as it halts feature development and introduces massive risk.
• Works with: AngularJS 1.5+ (component API required for react2angular), React 16.8+ (hooks), React 18.x (with react18-react2angular fork), React 19.x (test bridge compatibility).

Constraints

• AngularJS must be 1.5+ for react2angular bridge (component API required); for 1.2-1.4, use ngReact with directive bridge instead [src6]
• Never attempt a big-bang rewrite on codebases > 5,000 LOC — use incremental migration to avoid halting feature delivery [src2, src5]
• Both AngularJS and React must share a single source of truth for state (Redux recommended) during migration — never duplicate state across frameworks [src4, src5]
• Replace the router last — it is the most disruptive step and forces all page components to be converted simultaneously [src4]
• AngularJS is EOL since Dec 2021 with 8+ unpatched CVEs (including CVE-2024-21490, CVE-2024-8372, CVE-2024-8373, CVE-2026-22610) — PCI DSS 4.0 bans EOL frameworks without verified mitigation; migration is a compliance requirement, not optional [src7, src8]

Quick Reference

Decision Tree

START
|-- Is your AngularJS app < 5,000 LOC?
|   |-- YES --> Consider a clean rewrite in React (faster than incremental migration)
|   +-- NO |
|-- Does your app use AngularJS 1.5+ component API?
|   |-- YES --> Use react2angular for bridge (see Step 2)
|   +-- NO |
|-- Does your app use only directives (restrict: 'E', 'A')?
|   |-- YES --> Use ngReact or angular2react for bridge (see Step 2, Alternative)
|   +-- NO |
|-- Is your app under active feature development?
|   |-- YES --> Incremental migration: new features in React, bridge existing
|   +-- NO |
|-- Is the app in maintenance mode with security-only updates?
|   |-- YES --> Consider HeroDevs NES while planning migration [src7]
|   +-- NO |
|-- Is PCI DSS 4.0 or FedRAMP compliance required?
|   |-- YES --> Migrate urgently — EOL frameworks banned without verified mitigation [src8]
|   +-- NO |
+-- DEFAULT --> Incremental bottom-up migration with react2angular + shared Redux store

Step-by-Step Guide

1. Set up the React build pipeline alongside AngularJS

Add React and its build tooling to your existing project without removing any AngularJS code. Use your existing bundler (webpack, rollup) or add one if you only use script tags. [src1, src5]

# Install React core + bridge library
npm install react react-dom react2angular prop-types

# Install build tooling (if not already present)
npm install --save-dev @babel/preset-react webpack webpack-cli babel-loader

# For TypeScript projects
npm install --save-dev typescript @types/react @types/react-dom

Add JSX support to your webpack/babel config:

// webpack.config.js — add to module.rules
{
  test: /\.(js|jsx|tsx?)$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env', '@babel/preset-react']
    }
  }
}

Verify: npx webpack --mode development builds without errors, and your existing AngularJS app still works unchanged.

2. Create the React-AngularJS bridge

Register React components as AngularJS directives using react2angular. This is the core mechanism that allows both frameworks to coexist. [src4, src6]

// bridge.js — Register React components as Angular directives
import { react2angular } from 'react2angular';
import angular from 'angular';
import { UserCard } from './components/UserCard';

angular
  .module('myApp')
  .component('userCard', react2angular(UserCard, ['user', 'onEdit']));
// Props are passed as attributes:
// <user-card user="$ctrl.user" on-edit="$ctrl.handleEdit">

For apps using the older directive API instead of .component(), use ngReact:

// Alternative: ngReact bridge for directive-based apps (AngularJS < 1.5)
import 'ngreact';
import { UserCard } from './components/UserCard';

angular
  .module('myApp', ['react'])
  .value('UserCard', UserCard)
  .directive('userCard', function(reactDirective) {
    return reactDirective('UserCard', ['user', 'onEdit']);
  });

Verify: Add <user-card user="$ctrl.someUser"></user-card> to any AngularJS template. The React component should render within the AngularJS page.

3. Establish shared state management with Redux

Set up a Redux store that both AngularJS and React components can access. This prevents state divergence during the migration period. [src4, src5]

// store.js — Shared Redux store
import { configureStore, createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'users',
  initialState: { list: [], loading: false },
  reducers: {
    setUsers: (state, action) => { state.list = action.payload; },
    setLoading: (state, action) => { state.loading = action.payload; }
  }
});

export const { setUsers, setLoading } = userSlice.actions;
export const store = configureStore({ reducer: { users: userSlice.reducer } });

// Connect AngularJS to the shared Redux store using ng-redux
import ngRedux from 'ng-redux';
import { store } from './store';

angular.module('myApp', [ngRedux])
  .config(($ngReduxProvider) => {
    $ngReduxProvider.provideStore(store);
  });

Verify: Dispatch an action from an AngularJS controller and confirm the React component re-renders with updated data.

4. Convert leaf components bottom-up

Start with the simplest, most isolated components at the bottom of your component tree and work upward. This minimizes risk and lets you build confidence. [src2, src4]

// BEFORE: AngularJS directive
angular.module('myApp').directive('statusBadge', function() {
  return {
    restrict: 'E',
    scope: { status: '=' },
    template: '<span class="badge badge-{{status}}">{{status}}</span>'
  };
});

// AFTER: React component
function StatusBadge({ status }) {
  return <span className={`badge badge-${status}`}>{status}</span>;
}

// Register as Angular directive via bridge
angular.module('myApp')
  .component('statusBadge', react2angular(StatusBadge, ['status']));

Conversion priority order: (1) pure display components, (2) form inputs, (3) list items/cards, (4) containers with data fetching, (5) page-level components, (6) router (last).

Verify: Run your existing test suite after each component conversion. Both AngularJS and converted React components should behave identically.

5. Migrate routing last

Once the majority of your components are React, replace the AngularJS router with React Router. This is the most disruptive step and should be done last. [src4, src5]

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Dashboard } from './pages/Dashboard';
import { UserProfile } from './pages/UserProfile';
import { Settings } from './pages/Settings';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/users/:id" element={<UserProfile />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </BrowserRouter>
  );
}

Verify: Navigate to every route and verify all pages render correctly. Check that browser back/forward navigation and deep links work.

6. Remove AngularJS entirely

Once all components and routing are in React, remove the AngularJS dependency and all bridge code. [src2, src5]

# Remove AngularJS and bridge dependencies
npm uninstall angular angular-route angular-resource ngreact react2angular ng-redux

// New entry point: index.jsx
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Verify: npm ls angular returns empty (no AngularJS in dependency tree). Run full test suite. Bundle size should be significantly smaller.

Code Examples

JavaScript: Wrapping a React Component for AngularJS with react2angular

Full script: javascript-wrapping-a-react-component-for-angularj.js (46 lines)

// Input:  A React component + AngularJS module
// Output: The React component available as an AngularJS directive

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { react2angular } from 'react2angular';
import angular from 'angular';

// Step 1: Create a standard React component
function SearchBox({ placeholder, onSearch, debounceMs = 300 }) {
  const [query, setQuery] = useState('');

  useEffect(() => {
    const timer = setTimeout(() => {
      if (query.length >= 2) {
        onSearch(query);
      }
    }, debounceMs);
    return () => clearTimeout(timer);
  }, [query, debounceMs, onSearch]);

  return (
    <div className="search-box">
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder={placeholder}
      />
      {query && (
        <button onClick={() => { setQuery(''); onSearch(''); }}>
          Clear
        </button>
      )}
    </div>
  );
}

SearchBox.propTypes = {
  placeholder: PropTypes.string,
  onSearch: PropTypes.func.isRequired,
  debounceMs: PropTypes.number
};

// Step 2: Register as AngularJS component via bridge
angular
  .module('myApp')
  .component('searchBox', react2angular(SearchBox, ['placeholder', 'onSearch', 'debounceMs']));

// Step 3: Use in AngularJS template
// <search-box placeholder="'Search users...'" on-search="$ctrl.handleSearch"></search-box>
// NOTE: Attribute names use kebab-case; react2angular maps to camelCase props.

TypeScript: Migrating an AngularJS Service to a React Custom Hook

Full script: typescript-full-migration-of-an-angularjs-service-.ts (81 lines)

// Input:  AngularJS service with $http calls and state management
// Output: React custom hook with identical functionality

// BEFORE: angular.module('myApp').factory('UserService', function($http) { ... });
// AFTER:

import { useState, useCallback } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

interface UseUsersReturn {
  users: User[];
  loading: boolean;
  error: string | null;
  fetchUsers: () => Promise<void>;
  updateUser: (id: string, data: Partial<User>) => Promise<void>;
  deleteUser: (id: string) => Promise<void>;
}

export function useUsers(): UseUsersReturn {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchUsers = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch('/api/users');
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const data: User[] = await response.json();
      setUsers(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to fetch users');
    } finally {
      setLoading(false);
    }
  }, []);

  const updateUser = useCallback(async (id: string, data: Partial<User>) => {
    setError(null);
    try {
      const response = await fetch(`/api/users/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const updated: User = await response.json();
      setUsers(prev => prev.map(u => u.id === id ? updated : u));
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to update');
      throw err;
    }
  }, []);

  const deleteUser = useCallback(async (id: string) => {
    setError(null);
    try {
      const response = await fetch(`/api/users/${id}`, { method: 'DELETE' });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      setUsers(prev => prev.filter(u => u.id !== id));
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to delete');
      throw err;
    }
  }, []);

  return { users, loading, error, fetchUsers, updateUser, deleteUser };
}

JavaScript: Shared Redux Store Bridge Between AngularJS and React

Full script: javascript-shared-redux-store-bridge-between-angul.js (50 lines)

// Input:  Redux store accessed by both AngularJS controllers and React components
// Output: Synchronized state across both frameworks during migration

import { configureStore, createSlice } from '@reduxjs/toolkit';

// 1. Define Redux slice (shared by both frameworks)
const filtersSlice = createSlice({
  name: 'filters',
  initialState: { searchQuery: '', category: 'all', sortBy: 'name' },
  reducers: {
    setSearchQuery: (state, action) => { state.searchQuery = action.payload; },
    setCategory: (state, action) => { state.category = action.payload; },
    setSortBy: (state, action) => { state.sortBy = action.payload; }
  }
});

export const { setSearchQuery, setCategory, setSortBy } = filtersSlice.actions;
export const store = configureStore({ reducer: { filters: filtersSlice.reducer } });

// 2. AngularJS side: connect controller to Redux via ng-redux
function FilterBarCtrl($ngRedux, $scope) {
  const mapState = (state) => ({
    searchQuery: state.filters.searchQuery,
    category: state.filters.category
  });
  const mapDispatch = { setSearchQuery, setCategory };
  const unsubscribe = $ngRedux.connect(mapState, mapDispatch)($scope);
  $scope.$on('$destroy', unsubscribe);

  // Double-write pattern during transition
  $scope.updateSearch = function(query) {
    $scope.setSearchQuery(query);             // Redux (new)
    LegacyFilterService.setSearch(query);      // Angular service (remove later)
  };
}

// 3. React side: read from same Redux store
import { useSelector } from 'react-redux';

function SearchResults() {
  const { searchQuery, category } = useSelector(state => state.filters);
  return <p>Results for "{searchQuery}" in {category}</p>;
}

Anti-Patterns

Wrong: Big-bang rewrite of the entire application

// BAD — Stopping all feature development for months to rewrite everything
// This approach has a high failure rate and massive business risk [src2, src5]

// "Let's just rewrite the whole thing in React over the next 6 months"
// Meanwhile: no new features, no bug fixes, team morale drops,
// stakeholders lose patience, project gets cancelled

Correct: Incremental migration with continuous delivery

// GOOD — Migrate one component at a time while shipping features [src2, src4]
// Week 1: Set up React + bridge library
// Week 2: Convert 3 leaf components (badges, icons, tooltips)
// Week 3: Ship a new feature — write it in React from the start
// Week 4: Convert 2 more existing components
// ...continue until AngularJS is fully removed

Wrong: Duplicating state between AngularJS and React

// BAD — Each framework maintains its own copy of the same data

// AngularJS controller
$scope.users = UserService.getAll();    // AngularJS has its own copy

// React component
function UserList() {
  const [users, setUsers] = useState([]);  // React has its own copy
  useEffect(() => {
    fetch('/api/users').then(r => r.json()).then(setUsers);
  }, []);
  // BUG: AngularJS and React show different data after updates
}

Correct: Single source of truth via shared Redux store

// GOOD — One Redux store is the single source of truth [src4, src5]

// AngularJS reads from Redux via ng-redux
const unsubscribe = $ngRedux.connect(
  state => ({ users: state.users.list })
)($scope);

// React reads from Redux via react-redux
function UserList() {
  const users = useSelector(state => state.users.list);
  // Both always show the same data
}

Wrong: Converting the router first

// BAD — Replacing the router breaks every route at once [src4]
// This forces you to convert ALL page components simultaneously

// "Let's start by switching to React Router..."
// Result: Every page breaks. You must convert everything before anything works.

Correct: Convert the router last

// GOOD — Convert leaf components and pages first, router last [src4, src5]
// 1. Convert UI components (buttons, cards, forms)
// 2. Convert page-level components
// 3. Only THEN replace the AngularJS router with React Router
// At step 3, all pages are already React — the router swap is straightforward

Wrong: Direct DOM manipulation in React components

// BAD — jQuery or direct DOM manipulation inside React [src1]
function BadComponent() {
  useEffect(() => {
    $('#my-element').addClass('active');
    document.querySelector('.sidebar').innerHTML = '<p>Updated</p>';
  }, []);
  return <div id="my-element">Content</div>;
}

Correct: Let React manage its own DOM, isolate legacy DOM access

// GOOD — Use React state and refs; isolate non-React DOM [src1]
function GoodComponent({ isActive }) {
  return <div className={isActive ? 'active' : ''}>Content</div>;
}

// For legacy jQuery plugins, isolate them:
function LegacyPluginWrapper() {
  const containerRef = useRef(null);
  useEffect(() => {
    $(containerRef.current).datepicker({ format: 'yyyy-mm-dd' });
    return () => $(containerRef.current).datepicker('destroy');
  }, []);
  return <div ref={containerRef}></div>;
}

Common Pitfalls

• Prop name casing mismatch: AngularJS templates use kebab-case (on-search), React uses camelCase (onSearch). When using ngReact's reactDirective, you must explicitly list camelCase prop names. Fix: reactDirective('MyComponent', ['onSearch', 'userName']). [src4, src6]
• Digest cycle not triggered after React state change: React updates outside AngularJS digest cycle go unnoticed. Fix: wrap callbacks with $scope.$apply() or use $ngRedux which handles digest integration automatically. [src4]
• Memory leaks from unsubscribed Redux connections: Forgetting to unsubscribe $ngRedux.connect() causes ghost updates. Fix: $scope.$on('$destroy', unsubscribe). [src4]
• Bundle size bloat during migration: Running both frameworks roughly doubles your JS bundle. Fix: use code-splitting (React.lazy + dynamic import()) and tree-shake unused AngularJS modules as you migrate. [src2, src5]
• Test suite breaks from mixed rendering: Karma/Jasmine tests fail for converted components. Fix: use Jest + React Testing Library for converted components; keep Karma for remaining AngularJS; run both in CI. [src5]
• $http interceptors lost when switching to fetch/axios: Auth token injection, 401 redirect, and error handling interceptors have no automatic equivalent. Fix: create an Axios instance with interceptors or a fetch wrapper replicating the same behavior. [src3, src5]
• CSS/style conflicts between frameworks: AngularJS directives rely on ng-scope, ng-isolate-scope classes that React doesn't generate. Fix: use CSS modules or CSS-in-JS for React components to scope styles. [src2]
• Mutation Events removal breaks AngularJS: Chrome 127+ removed Mutation Events that AngularJS relies on for DOM observation. Fix: apply HeroDevs NES patch or polyfill MutationEvent with MutationObserver wrapper before migrating. [src8]

Diagnostic Commands

# Check AngularJS version in your project
npm ls angular | head -5

# Check if react2angular bridge is installed
npm ls react2angular

# Count remaining AngularJS module declarations (migration progress)
grep -r "angular\.module\(" src/ --include="*.js" --include="*.ts" | wc -l

# Count remaining AngularJS directives
grep -r "\.directive\(" src/ --include="*.js" --include="*.ts" | wc -l

# Count remaining AngularJS controllers
grep -r "\.controller\(" src/ --include="*.js" --include="*.ts" | wc -l

# Count remaining $scope usage (unconverted code indicator)
grep -r "\$scope" src/ --include="*.js" --include="*.ts" | wc -l

# Analyze bundle size to track bloat during migration
npx webpack-bundle-analyzer dist/stats.json

# Run both test suites during migration period
npx karma start karma.conf.js && npx jest --coverage

# Check for known AngularJS CVEs in your dependency tree
npm audit | grep -i angular

Version History & Compatibility

When to Use / When Not to Use

Important Caveats

• AngularJS reached end-of-life on December 31, 2021. It still had approximately 419,000 weekly npm downloads as of early 2025, but no security patches are released for the open-source version. Eight CVEs have been disclosed since EOL, including CVE-2024-21490 (ReDoS), CVE-2024-8372/8373 (image sanitization), and CVE-2026-22610 (Template Compiler XSS via SVG bypass). Migrating is a security and compliance imperative. [src7, src8]
• PCI DSS 4.0 explicitly bans EOL frameworks without verified mitigation strategies. FedRAMP/Executive Order 14028 SBOM requirements flag unsupported components and can trigger Authorization to Operate (ATO) denial. Organizations in regulated industries must prioritize migration or adopt HeroDevs NES. [src8]
• Chrome 127+ removed Mutation Events that AngularJS relies on for DOM observation. Safari 19 and subsequent browser releases continue removing legacy APIs that AngularJS depends on. AngularJS applications may break on modern browsers without polyfills or NES patches. [src8]
• The react2angular bridge adds overhead per bridged component. For performance-critical paths with hundreds of bridged components, batch conversions to reduce bridge overhead.
• During migration (6-18 months for large codebases), you will ship a larger JavaScript bundle since both AngularJS and React are included. Plan for load time impact and use aggressive code-splitting. [src2, src5]
• AngularJS's dependency injection ($inject) has no direct React equivalent. Services must be refactored to ES module imports, React Context, or a DI library like inversify.
• Two-way data binding (ng-model) is fundamentally different from React's one-way data flow. Components relying heavily on two-way binding require more conversion effort. [src1]
• If your app uses $compile for dynamic template rendering, replacing it is one of the hardest migration challenges — use React's dynamic component rendering patterns instead.