AngularJS → React

Moving from AngularJS to React is a framework change, so there is no automatic upgrade path. The lower-risk approach is the strangler pattern: embed React into the AngularJS app and migrate view by view, mapping $scope/controllers to components and services to Redux/Zustand/Context.

Framework migrationDifficulty: hardEffort: weeks to months depending on app sizehigh risk

Last verified May 20, 2026 · Updated May 22, 2026

AngularJS to React is a framework migration with no automatic codemod. Choose between a full rewrite (only viable for small apps) and the strangler pattern: mount React inside the running AngularJS app and replace views one at a time, mapping controllers to components and $scope state to React state.

AngularJS is end-of-life

AngularJS receives no security patches after December 31, 2021. The framework change does not remove the urgency — keep the app on an active migration plan regardless of the target framework.

Full rewrite vs strangler pattern

A full rewrite is fastest only for small apps where the whole surface fits one effort. For anything larger, the strangler pattern wins: you embed React components into AngularJS directives, migrate the highest-value views first, and shrink the AngularJS surface until it disappears. The app ships throughout.

How the strangler migration works

Add a React build pipeline alongside the AngularJS bundle and mount React roots into specific AngularJS DOM nodes.
Wrap each migrated React view in a thin AngularJS directive so existing routes can render it.
Map AngularJS controllers/$scope to React components with props and hooks.
Replace AngularJS services with a state layer: Redux or Zustand for shared state, Context for cross-cutting concerns.
Migrate routing from $routeProvider/ui-router to React Router once the bulk of views are React.

AngularJS to React migration map

AngularJS	React
controller + $scope	Function component + useState/useReducer
.factory / .service (shared state)	Redux / Zustand store
.factory / .service (cross-cutting)	React Context
ng-repeat / ng-if	Array .map() / conditional rendering
$http	fetch / axios in an effect or query hook
$routeProvider / ui-router	React Router

Incremental embedding is the safety net

Because React mounts into existing AngularJS DOM nodes, an unfinished migration still ships. Migrate, verify, and merge one view at a time rather than holding a long-lived rewrite branch.

Per-view PR review checklist

The React view renders and behaves identically to the AngularJS original
Shared state moved to the chosen store (Redux/Zustand) rather than duplicated
The AngularJS directive wrapper is removed once routing is on React Router
No two-way $scope bindings were ported as implicit shared mutable state
Build and the view's tests pass with both stacks present

Rollback strategy

Migrate one view per commit so a regression is a single revert.
Keep the AngularJS view until its React replacement is verified in a build.
If a view blocks on a missing React equivalent for an AngularJS library, leave it in AngularJS and continue.

Official sources

Official docsUpgrading from AngularJS to Angular (ngUpgrade)angular.devreliability 98%
Backs the breaking-change and migration-step claims.
Official docsReact Documentationreact.devreliability 98%
Backs the breaking-change and migration-step claims.

Copy-ready AI prompts

Structured prompts for an AI coding assistant. Inspect first, then execute incrementally, and keep a human in the review loop.

Repo inspectionRepo inspection prompt

You are helping migrate an Angular codebase from AngularJS to React.

Do not edit files yet. First inspect the repository and report:
1. The exact @angular/core and @angular/cli versions in package.json and the lockfile (or the angular.js version for AngularJS apps).
2. The architecture: NgModules vs standalone components, the router in use ($routeProvider, ui-router, or @angular/router), and any $scope/controller code still present.
3. Components, services, and directives grouped by complexity so a migration order can be planned.
4. Third-party libraries and whether they have versions compatible with the target.
5. Build, lint, and test commands (ng build, ng test, ng lint, or the legacy toolchain).

Return: a migration risk summary, the modules/components most likely to break, a suggested incremental order, the commands to run before editing, and any questions that need human confirmation.

Safety: Inspection only. The agent must not modify files in this step.

Works with Claude Code, Cursor, GitHub Copilot

Migration executionMigration execution prompt

Migrate this codebase from AngularJS to React, one component or concern at a time.

Work incrementally and pause for review after each unit: stand up the hybrid/bridge layer first, then migrate the lowest-risk leaf component, rewrite its template and state, wire it back into the host app, and verify it renders identically before moving on. Convert services and routing only after the components that depend on them are migrated.

After each step run the project's build, lint, and tests, and report results before continuing. Do not refactor unrelated code or bundle multiple components into one change.

Safety: Apply changes incrementally and keep each step reviewable. Never bundle unrelated refactors or migrate multiple components at once.

Works with Claude Code, Cursor, GitHub Copilot

Test plan

Commands

npm run build
npm run lint
npm test -- --watch=false
npx playwright test

Manual checks

For each migrated view, compare rendered output and behavior against the AngularJS original.
Exercise the embedding boundary: React roots mounted inside AngularJS DOM and shared store updates.
Verify routing reaches every view during the dual-stack phase.

Regression risks

Two-way $scope bindings turned into implicit shared mutable state in React.
State desync between the AngularJS digest and the React store at the boundary.
AngularJS libraries with no React equivalent blocking specific views.

Acceptance criteria

Every targeted view is served by React and its AngularJS equivalent is removed.
Build, lint, unit, and e2e tests pass.
Routing runs on React Router with no AngularJS modules remaining.

Frequently asked questions

Should I rewrite all at once or migrate incrementally?

For most apps, migrate incrementally with the strangler pattern: embed React into the AngularJS app and replace views one at a time so you keep shipping. A full rewrite is only practical for small apps where the entire surface can be redone in a single effort.

What replaces AngularJS services and $scope in React?

Map controllers and $scope to React components with hooks. Move shared application state into Redux or Zustand, use Context for cross-cutting concerns like auth or theming, and replace $http with fetch/axios behind a query hook.