Skip to content
Briebug

AngularJS migration guide

How to migrate AngularJS to Angular without a rewrite

Your application still runs on AngularJS, and a full rewrite would stop the roadmap for months. An incremental migration moves it to modern Angular one piece at a time, while it stays in service.

Updated

Why AngularJS has to go

Google ended long-term support for AngularJS on December 31, 2021. There are no more official security fixes, and fewer libraries, tools and engineers work with it every year.

The good news is that you do not have to stop and rewrite. Angular ships an upgrade package that runs AngularJS and Angular side by side in one application, so you can move one piece at a time and keep releasing features while you do.

The migration, step by step

  1. Assess the application

    List every module, component, directive, service and third-party library, and note which ones have tests. Find the patterns that make a hybrid application hard, such as heavy use of $scope, deep two-way binding or libraries with no Angular equivalent.

  2. Prepare the AngularJS code

    Move the code toward the shape Angular expects before you add Angular: component-style directives (the .component() API, available since AngularJS 1.5), TypeScript, and a modern module bundler. Each change ships on its own and makes the next step smaller.

  3. Run both frameworks in one application

    Bootstrap a hybrid application with Angular's upgrade package (@angular/upgrade/static, often called ngUpgrade). AngularJS and Angular then run side by side in the same page, so the application keeps working while parts of it move.

  4. Migrate piece by piece

    Move shared services first, then the leaf components, then whole routes. While both frameworks run, downgrade new Angular components for use in AngularJS templates, and upgrade AngularJS services for use in Angular code. Add tests to each piece as it moves.

  5. Keep shipping features

    Build new features in Angular from the start instead of freezing the roadmap. Users keep getting releases during the migration, and every new feature is one less thing to migrate later.

  6. Remove AngularJS

    When the last route has moved, remove the upgrade module and the AngularJS dependency. Then upgrade Angular itself to the current version in supported steps, so the application does not fall behind again.

Start with a plan for your own application

The steps are the same everywhere, but the order and the effort depend on your code. A review of the application tells you which parts to move first, what blocks a hybrid setup, and what the migration will cost.

Briebug has moved AngularJS applications to Angular for software companies and enterprises. See our AngularJS to Angular migration services, or start with a fixed-fee assessment.

About the Technical Assessment

NETSCOUT

Network performance monitoring software company

A migration plan before the migration: A migration plan with a hybrid Angular 9 and AngularJS proof of concept and a build-out plan. NETSCOUT moved into a prototype phase.

Read the NETSCOUT case study

Common questions

Is AngularJS still supported?

No. Google ended long-term support for AngularJS on December 31, 2021. Since then there have been no official security fixes, so every known vulnerability in AngularJS stays open in your application.

Can AngularJS and Angular run in the same application?

Yes. Angular's upgrade package runs both frameworks side by side in one application. That is what makes an incremental migration possible: the application keeps working, and users keep getting releases, while it moves one piece at a time.

Should we migrate to Angular or rewrite in another framework?

Decide from evidence about your own code. Angular provides official tools for running AngularJS and Angular in one application, so the move can happen step by step while the application stays in service. Another framework can also replace the application route by route, but your team has to build and maintain the connection between the old and new screens.

How to decide between rescue and rebuild

How long does an AngularJS migration take?

It depends on the size of the application, its test coverage and how much of it follows component patterns already. An assessment of the code gives you a milestone-based estimate for your own application before you commit to the work.

Get a migration plan for your AngularJS application.

Book a short call with a senior engineer. We will scope the assessment and confirm the fixed fee before you commit.

Book a Technical Assessment