Home / Case Studies / How to Migrate from AngularJS to Angular 9+
case study

How to Migrate
from AngularJS to Angular 9+
Case Study

How to Migrate from AngularJS to Angular 9+

Outdated technology could stab you in the back when you least expect it.

This was the case of our client whose business growth peaked in the decline of AngularJS. To provide a good level of customer experience, he had to migrate the system to the latest Angular version fast.

About the Client

The client is a global enterprise that provides employee recognition services in 160 countries. Their unique solution, a configurable cloud-based SaaS platform, helps thousands of companies improve the social culture within their organization and strengthen relationships with their employees.

From the beginning of our cooperation, the system had more than 5 million users in total, where user experience and customer support were at the core of the client's business processes. To that end, the migration from clumsy AngularJS became an integral part of the company’s IT strategy.

Why Was it Vital to Migrate from

The reasons for migration were obvious: the application’s end users wanted new features while the management thrived for innovations.
The system frontend on AngularJS restricted desired improvements and, in addition, accumulated a high technical debt.

It was just one of the numerous arguments for migration from AngularJS, other reasons why companies consider AngularJS to Angular 9 migration are listed in our guide.

In the nutshell, the client found the latest Angular version the best alternative for its legacy system that must meet the following criteria:

Higher performance

Improved security levels

Greater usability


Migrating AngularJS to Angular 9:
Better Architecture and Performance

Language App architecture Development Tooling support Performance Upgrades
JavaScript MVC Less tractable CLI Not enough to fulfill developer requirements Becomes obsolete in 2021
TypeScript Component-based With simplified structure, it’s easier to develop and maintain large applications Wide choice of third-party tools, built in IVY compiler Overall improvements in performance, especially in speed and dependency injection LTS support

The Challenges
We Faced in This Project

Software modernization projects have never been plain and straightforward, especially for large enterprises. The bigger the system, the more unpredictable issues might pop up.

We had four main

arrowPrev Next arrow

Migrating AngularJS to Angular Case Study: Best Practices before Starting the Project

A meticulous planning is the best you can do for the modernization project. No jokes! That is what helped our team accomplish a bunch of work on time and deliver all the functionality with no disruption. So, what did we do from the jumpstart?

These hints are just as useful when you need to migrate AngularJS to Angular 11, which is in demand nowadays.

Legacy System
Modernization Case Studies

Migration from AngularJS to
Angular 11 Case Study
Migration from AngularJS to Angular 11

How to Migrate from AngularJS to Angular: Step-by-Step Process

Multi Tenant

Same Application
Seperate Database


Map a Multi-tenant SaaS Architecture to the New Conditions

As the app consisted of 3 levels: client sites, admin dashboards, and global admin dashboard, we decided to prioritize migration efforts (app’s logic, components, modules) based on the business requirements. In the first instance, we worked on client sites migrating them incrementally, and then, switched to admin parts.

Whereas the user experience was of utmost importance for the client, our team enabled customers to "skitter" across the old and new versions. Also, the tenants were able to change themes and widgets however they wanted.

Replace Outdated AngularJS Components with Proper Angular Tools

The next big step on the migration journey was to complement technology stack with proper Angular libraries and components.

The thing is the existing AngularJS elements weren’t the right fit for the new app, so in the table below you can see how we’d replaced them:

Legacy component
Angular tool
Third-party tools: Angular and related
1 AngularJS v.1.7.8 Angular 9 High Priority
2 Angular UI (Bootstrap wrappers) ng-bootstrap High Priority
3 Angulartics Angulartics2 High Priority
4 Angular Gridster angular-gridster High Priority
Third-party tools: Kendo UI and related
5 KendoMultiselect MultiSelectModule MEDIUM PRIORITY
6 KendoWindow WindowModule MEDIUM PRIORITY
7 KendoGrid GridModule MEDIUM PRIORITY
8 KendoToolip TooltipModule MEDIUM PRIORITY
Third-party tools: Other
1 jquery-ui-1.12.0 Skip MEDIUM PRIORITY
1 Jcrop ngx-image-cropper MEDIUM PRIORITY
1 highcharts.js highcharts-angular MEDIUM PRIORITY

ModLogix Suggests

When selecting the right tools to substitute legacy elements in the target system, focus on the business prospects, community support, and resources to introduce new technologies (namely, available expertise in dealing with chosen tools).

Develop Single-Page Application

The legacy AngularJS apps were built using a conventional web development approach. In short, most of the logic was performed on the server and the app did numerous page reloads as the user searched the website.

Upon each user request the website renders all necessary HTML, JavaScript, and CSS code, causing a ripple effect. It slowed down the performance and worsened the user engagement.

Instead, we decided to create a Single Page Application (SPA) that dynamically loads everything in response to user actions with no reloads at all.

Under this approach, we fully isolated ASP.NET MVC backend and API from the frontend part. As far as you remember, it was the principal task to reuse it in the target system.

Boosted performance with asynchronous requests Boosted performance with asynchronous requests
Enhanced user experience due to flexible user interfaces Enhanced user experience due to flexible user interfaces
Facilitated maintenance and support Facilitated maintenance and support
Ready to start your project? Get a consultation!

When Should You Choose Single-Page Application for the Project

Traditional Web App
Single Page Application
Required Team Familiarity with JavaScript/TypeScript Minimal Required
Support Browsers without Scripting Supported Not Supported
Minimal Client-Side Application Behavior Well-Suited Overkill
Rich, Complex User Interface Requirements Limited Well-Suited

Set Up Continuous Integration/Continuous Delivery

Continuous Integration/Continuous Delivery (CI/CD) is a well-known practice to confidently build, validate, and deploy any type of app.

We often apply CI/CD in the projects, and this one was no exception. The approach allows performing frequent releases while maintaining and improving the quality of the product.

Since our client was up to date at every development stage and provided invaluable feedback on the go, we launched the system perfectly on time.

The Importance of Automation in the Migration Process

Successful migration should be completed with minimal disruption to daily operations. Automated testing optimizes the development detecting any flaws that might remain unseen. In such a way, the dev team releases the app to production much faster with the highest possible quality. 

Migration from soon-to-be legacy AngularJS leaves more questions than answers for organizations. In this post, we gathered expert opinions about migration tips, challenges, and risks.

Learn more

Blog Posts

Maintain the Legacy and Upgraded
Version Simultaneously

“Users shouldn’t feel the shift”
is something we heard at the beginning of the initial negotiations.

In that view, we decided to create the new Angular app, and support the old version in parallel.

Plus, as we hinted at, system customers were able to tap into the previous version with the flip of a switch.

It’s a superior feature for multi-tenant systems: each tenant can make changes to their product without interrupting others.


and Tools We Use

1 Software Architect
1 Business Analyst
1 Dev Lead
1 QA Lead
3 Frontend Developers
3 Full-stack Developers
1 Automation QA Engineer
3 Manual QA Engineers
1 Scrum Master
16 Months


5x lesser code length 5x lesser code length

A large amount of data in the cumbersome AngularJS app involved a lot of work, so our team built a new app, fixed bugs, and optimized the source code in parallel, almost 61K lines in total. As the saying goes, “Always leave the campground cleaner than you found it.”

123% higher product performance 123% higher product performance

The migration process was mainly driven by the needs of system users, as they expected new features and smoother experience. With the latest Angular version and cutting-edge tools, we managed to accomplish it successfully. Besides, updated functionality helped the client expand the customer base. Since the migration, the system was replenished with another tenant, a large-scale enterprise.

LTS support LTS support

The client has got the modern Angular 9 framework marked LTS - long-term support. The acquired status allows maintaining the software much easier, which saves the company’s resources in the long run. In future, app migration to the next version won’t involve complete rewriting.

5-6x faster project releases 5-6x faster project releases

Due to improved CI/CD pipeline and the level of granularity, the dev team rapidly applies hotfixes to a site development environment. These changes are easily configured for production


Key Takeaways

If it's possible and fits in the context, isolate the backend from the frontend part during the migration. Our experience so far has shown that moving the entire app altogether could drag out development and raise the costs and complexity dramatically.

CI/CD already seems commonplace in software development, but most organizations underestimate its value. Apply automation throughout the development cycle to speed up the process.

Consult with a qualified legacy software modernization company that’s aware of all the migration pitfalls. Although AngularJS and Angular have the same roots, in fact, they are utterly different frameworks.

Our Team
on This Project

Dev Lead


We’ve been collaborating with the client for almost 10 years, and our team knows all system’s ins and outs. Despite that fact, migration turned out to be a quite demanding task. And if I’d had to do it once again, I’d have advised you share the efforts on supporting existing software and upgrading to the new version and have a dedicated team by your side.


Legacy System
Modernization Case Studies

All Cases
Migration from AngularJS to Angular 11 Case Study

Read More

Let’s Start a

Share your challenge with us – we want to hear from you!

* Please enter your name
* Please leave a message

    Ready to start your
    Let’s Talk

    We use cookies to ensure that we give you the best experience on our website. By continuing to browse this site you accept the use of cookies.

    Get Your FREE Template!

    Please, provide the email address so that we can send the whitepaper to you.

    * Please enter your name

      Get Your FREE Template!

      Please, provide the email address so that we can send the checklist to you.

      * Please enter your name