+1 (726) 227-3745

AngularJS to Angular Migration

Move off end-of-life AngularJS without freezing your roadmap

AngularJS to Angular Migration

AngularJS reached end of life on December 31, 2021. Since then it has received no security patches from Google, its ecosystem (ui-router, angular-ui-bootstrap, the MEAN.JS boilerplate) has frozen in place, and every year it gets harder to hire engineers willing to work in $scope. If your MEAN application still runs on AngularJS 1.x, you are carrying unpatched vulnerabilities, a Bower/Grunt toolchain nobody maintains, and a front end that cannot use anything the web platform has shipped in the last five years.

We migrate AngularJS and MEAN.JS applications to modern Angular (v22 is current; v20 and later are the realistic targets) without freezing your roadmap or betting the business on a big-bang rewrite.

Why now

  • Security. AngularJS CVEs published after 2022 have no upstream fix. Commercial extended support (for example HeroDevs' Never-Ending Support) buys time, but it is a bridge, not a destination.
  • Platform drift. AngularJS predates ES modules, TypeScript-first tooling, and modern bundlers. Every dependency you touch is a fight.
  • Hiring. AngularJS experience is leaving the market. Teams that can confidently modernize a 1.x codebase are scarce, and the pool shrinks every year.
  • Cost compounding. Each feature added to the legacy app is one more thing to migrate later. The cheapest migration is the one you start before the next roadmap item.

Assessment first

Every engagement starts with a fixed-scope assessment, typically one to two weeks, that ends with a written migration plan your team can execute with or without us.

  • Component and module inventory. Controllers, directives, services, filters, and templates, sized by lines and by coupling.
  • $scope and watcher census. How much of the app relies on $watch, $broadcast, and two-way binding, which drives how much logic moves cleanly into signals and how much needs redesign.
  • Dependency audit. Which third-party AngularJS modules have modern equivalents, which need replacing, and which can be wrapped temporarily.
  • Hybrid eligibility. Whether the app's routing and bootstrap are compatible with running AngularJS and Angular side by side.
  • Backend coupling. What the Express API and MongoDB models assume about the front end, so the migration does not accidentally become a backend rewrite.

Three strategies, compared

Incremental hybrid with ngUpgrade. Angular's @angular/upgrade package bootstraps both frameworks in one page and lets components and services cross the boundary in either direction. You migrate one feature at a time while the product keeps shipping. This wins when the app is large, actively developed, and cannot tolerate a feature freeze. The cost is a period of running two frameworks, which increases bundle size and demands discipline about which direction dependencies flow.

Route-by-route strangler. The new Angular application owns some URLs; the legacy app owns the rest; a thin shell (or the Express server) routes between them. Shared state moves behind the API. This wins when features are cleanly separated by route and when you want the two codebases fully isolated. It is the strategy we most often recommend for MEAN.JS applications, whose module-per-feature layout maps naturally onto it.

Full rewrite. Build the new front end in parallel and cut over once. This wins only when the app is small, the UI is being redesigned anyway, or the legacy code is so entangled that wrapping it costs more than replacing it. We say so when that is true, and we say so when it is not.

Handling the long tail

The last twenty percent of an AngularJS migration is where estimates go wrong. We have done this enough times to plan for it up front:

  • ui-router state trees become Angular Router configurations with lazy-loaded routes; nested views and resolvers map directly, custom state parameters usually need a small redesign.
  • $http interceptors become HttpInterceptorFn functions; auth-token injection and retry logic port cleanly, global error toasts usually move into a dedicated service.
  • Bower and Grunt/Gulp toolchains are retired in favor of the Angular CLI's esbuild-based build. This is often the first concrete deliverable, because it also unblocks dependency updates on the legacy side.
  • Third-party directives (datepickers, grids, charts) are replaced with maintained Angular or framework-agnostic libraries, with a wrapper component preserving the old API where many templates depend on it.
  • Tests. Protractor suites are rebuilt in Playwright; Karma unit tests move to Jest or Vitest. Coverage is re-established before the risky parts of the migration, not after.

The extended-support bridge

If the migration will take longer than your security posture allows, we can help you adopt a commercial AngularJS extended-support subscription as an interim measure so that known vulnerabilities are patched while the migration proceeds. We treat it as insurance with a planned end date, and the migration plan includes the point at which you cancel it.

Deliverables and typical phasing

  1. Assessment report and migration plan with effort ranges per module and a recommended strategy.
  2. Toolchain modernization: Angular CLI workspace, TypeScript, and a CI pipeline that builds both old and new code.
  3. Foundation: routing shell, authentication, shared services, and the first migrated feature as a pattern for the rest.
  4. Feature migration in priority order, demoed every sprint, with the legacy app shrinking measurably each cycle.
  5. Decommission: remove ngUpgrade or the legacy shell, delete the AngularJS bundle, cancel extended support.

Throughout, the Express API and MongoDB data model stay in place unless they need to change for their own reasons. Where they do, our version migration and upgrades team handles Express 5, Node.js LTS, and MongoDB 8 upgrades on the same plan. For a hands-on look at the component-level work, read our tutorial on migrating an AngularJS controller to a signals-based Angular component.

Talk to us

Send us a short description of your application, its approximate size, and what is driving the migration, and we will come back with a proposed assessment scope within two business days. Contact StackPilots to get started.

Back to services

Ready to retire AngularJS?
Contact Us Now