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

case study

How to Migrate
from AngularJS to Angular 9+
Case Study

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
AngularJS?

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
challenges:

Inability to use automation tools for the migration

There are at least three proven approaches to migrating AngularJS to Angular 9 and using automation tools could significantly facilitate this move. But there was one aspect in which we couldn’t exploit them - the backend part of ASP.NET MVC must’ve been reused in the target system. The only option to keep the backend was to rewrite the frontend side from scratch.

Implement complex functionality under the very tight deadlines

The infrastructure of the current SaaS solution was extremely sophisticated and multitenant, serving dozens of organizations at once. The migration process shouldn't have affected end-users or disrupted business processes. We knew the clue for this issue, but the client imposed a strict deadline, so the time for planning, analysis, and development was abnormally limited.

Ensure the highest level of customization and user experience

In our case, multitenancy possessed another challenge for our team – enabling customization for the unique needs of every system customer. So, the updated platform should've been highly adaptive to the needs of all customers providing the ability to add necessary features on demand. At the same time, the UI should be unchanged.

Pick up suitable substitutes for existing tools

In AngularJS to Angular 9 migration projects, it’s important to find proper equivalents for outdated AngularJS tools and libraries that fit in the new solution.

Prev Next

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?

Interpret the business requirements clearly. Involve a business analyst that identifies the need for changes and comes up with the most feasible solution. In most cases it saves 30-40% of budget and resources.
Use agile development methodology. Instead of doing “big-bang” releases with imperfect functionality, set the measurable milestones that allow you to gradually roll out revamped versions and tweak them if needed.
Devise the risk assessment strategy. Be in charge of all possible outcomes, even the worst one. Risks must be overseen on every stage considering a cumulative effect. For example, in this project we had 6 likely scenarios.

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

READ MORE

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

Multi Tenant

Same Application
Seperate Database

Scheme

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

Priority

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

Download the full list

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.

WHAT WE GAINED:

Boosted performance with asynchronous requests

Enhanced user experience due to flexible user interfaces

Facilitated maintenance and support

Ready to start your project? Get a consultation!

When Should You Choose Single-Page Application for the Project

Factor

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.

Experts Answer 10 Common Questions on How to Migrate from AngularJS

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

All articles

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.

Technologies
and Tools We Use

000

001

010

011

100

101

110

SCOPE OF WORK :

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

Results

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

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

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

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

Results

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

Vlad

Dev Lead

IT’S HARDER THAN IT LOOKS

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.