Contact Us

Project Description

This project revolved around modernizing a critical management portal for a large manufacturing company in Wisconsin. The portal, originally built with Angular 4, had grown increasingly difficult to maintain due to its outdated architecture. The company, under a managed services contract, required a robust upgrade to Angular 18 to boost performance, security, and scalability, while ensuring that the portal could continue supporting daily operations without disruption. The goal was not just to upgrade but to future-proof the application while making the development process more efficient for current and future teams. 

Challenge

Problem

The biggest challenge faced was the rapidly increasing obsolescence of Angular 4. New developers joining the team were unfamiliar with its outdated architecture, leading to a steep learning curve and productivity losses. This, coupled with deprecated libraries and frameworks, posed potential security risks that could leave the company vulnerable to cyber threats. The upgrade to Angular 18 was not only a matter of convenience but also a necessity to ensure long-term viability, stability, and security for the portal. 

Project Goals

  • Upgrade the application from Angular 4 to Angular 18 without disrupting the day-to-day operations.
  • Replace deprecated packages and outdated methods with modern alternative.
  • Ensure a smooth transition for developers unfamiliar with legacy Angular versions.
  • Increase the efficiency and security of the portal, leveraging Angular CLI to modernize the development and deployment pipeline.

Challenge

Problem

The biggest challenge faced was the rapidly increasing obsolescence of Angular 4. New developers joining the team were unfamiliar with its outdated architecture, leading to a steep learning curve and productivity losses. This, coupled with deprecated libraries and frameworks, posed potential security risks that could leave the company vulnerable to cyber threats. The upgrade to Angular 18 was not only a matter of convenience but also a necessity to ensure long-term viability, stability, and security for the portal. 

Project Goals

  • Upgrade the application from Angular 4 to Angular 18 without disrupting the day-to-day operations.
  • Replace deprecated packages and outdated methods with modern alternative.
  • Ensure a smooth transition for developers unfamiliar with legacy Angular versions.
  • Increase the efficiency and security of the portal, leveraging Angular CLI to modernize the development and deployment pipeline.

Solution

Before starting the development, we conducted an in-depth code review to understand the existing structure, identify areas needing refactoring, and ensure minimal disruption to production. Each component and page of the application was analyzed and logically divided into sections. This allowed for a structured approach, with individual developers assigned to specific parts of the application. The review process also revealed key areas where legacy code could be refactored, paving the way for a smoother upgrade path. 

Innovations

  • Systematic Refactoring: Rather than jumping straight to the latest Angular version, we took a methodical, step-by-step approach following the official Angular upgrade guide. Each update was performed individually, reducing the risk of errors and compatibility issues.
  • Collaborative Development and QA: Developers were assigned both a development section and a separate QA section to review. This setup enabled quick feedback loops, allowing teams to swiftly address issues and improve collaboration.
  • Lead Developer Oversight: A lead developer was tasked with overseeing the entire process. This person played a crucial role in guiding the team, managing the transition from JavaScript rollup methods to Angular CLI, and making executive decisions regarding deprecated packages. This leadership ensured that the upgrade process remained systematic and thorough.
  • Managed Services Integration: As the company operated under a managed services contract, ongoing support and monitoring were integrated into the upgrade process. This proactive approach ensured that any issues identified post-upgrade were swiftly addressed, minimizing downtime and ensuring continuous improvement.

High-Level Architecture

  • Frontend: Built with Angular 18, incorporating modularized components and modern Angular tooling.
  • Backend: A .NET Standard API paired with a SignalR hub for real-time updates.
  • Database: Azure SQL Server, which remained unchanged during the upgrade, minimizing potential risks during the transition.

Security

During the upgrade, we eliminated all deprecated packages and performed major refactoring where needed. This not only strengthened the application’s security but also removed legacy dependencies that could have exposed the system to vulnerabilities. The .NET backend and Azure SQL Server did not require any changes, ensuring a smooth transition to production without introducing new risks. 

Process

Team 

The team was structured to allow efficient collaboration, with each developer responsible for specific components or sections of the application. A lead developer oversaw all upgrades, providing guidance and addressing complex decisions, including the transition from rollup to Angular CLI. The systematic approach to updates ensured that no areas were overlooked, and developers worked in parallel to maximize efficiency. 

General Development Process 

We followed a carefully planned Agile process. Each update was performed individually, in alignment with the Angular upgrade guide. The lead developer played a pivotal role in assisting developers as they implemented changes and ensured that the transition to Angular CLI was executed smoothly. This step-by-step upgrade process, rather than a direct jump to the newest version, minimized the risk of errors and provided greater control over the codebase’s evolution. 

Development Challenges

  • Package Deprecation: Several legacy libraries were no longer supported in Angular 18. These packages were either updated or replaced through careful refactoring, ensuring compatibility with the new framework.
  • Collaborative Development and QA: Developers were assigned both a development section and a QA section. This process allowed for rapid feedback and improved teamwork, as each developer had a separate responsibility for verifying changes made by their peers.

Testing Process 

The testing process involved comprehensive manual testing across both end-to-end (E2E) scenarios and a staging environment to ensure the application’s stability before final deployment. Each update was manually tested by developers and QA teams in an isolated staging environment, replicating real-world production conditions. This thorough manual testing approach helped catch edge cases and ensure high-quality releases without relying solely on automated testing. The combination of manual E2E tests and QA-focused reviews provided assurance that the upgraded application performed as expected across all critical functions. 

Process

Team 

The team was structured to allow efficient collaboration, with each developer responsible for specific components or sections of the application. A lead developer oversaw all upgrades, providing guidance and addressing complex decisions, including the transition from rollup to Angular CLI. The systematic approach to updates ensured that no areas were overlooked, and developers worked in parallel to maximize efficiency. 

General Development Process 

We followed a carefully planned Agile process. Each update was performed individually, in alignment with the Angular upgrade guide. The lead developer played a pivotal role in assisting developers as they implemented changes and ensured that the transition to Angular CLI was executed smoothly. This step-by-step upgrade process, rather than a direct jump to the newest version, minimized the risk of errors and provided greater control over the codebase’s evolution. 

Development Challenges

  • Package Deprecation: Several legacy libraries were no longer supported in Angular 18. These packages were either updated or replaced through careful refactoring, ensuring compatibility with the new framework.
  • Collaborative Development and QA: Developers were assigned both a development section and a QA section. This process allowed for rapid feedback and improved teamwork, as each developer had a separate responsibility for verifying changes made by their peers.

Testing Process 

The testing process involved comprehensive manual testing across both end-to-end (E2E) scenarios and a staging environment to ensure the application’s stability before final deployment. Each update was manually tested by developers and QA teams in an isolated staging environment, replicating real-world production conditions. This thorough manual testing approach helped catch edge cases and ensure high-quality releases without relying solely on automated testing. The combination of manual E2E tests and QA-focused reviews provided assurance that the upgraded application performed as expected across all critical functions. 

Results

The upgrade to Angular 18 was completed faster than estimated due to the systematic and methodical approach we adopted. By breaking down the process into logical components and utilizing a lead developer for oversight, we were able to minimize potential errors and ensure a smooth transition. The manufacturing company now enjoys a secure, modern, and highly efficient management portal with improved performance, scalability, and developer experience. 

Contact us today to discuss your digital transformation journey with our experts and upgrade your Angular application without disrupting operations. 

Databricks Consulting Services
Blogs
Databricks Consulting Services in Chicago by Xorbix Technologies
Organizations increasingly turn to advanced analytics and machines to gain insights and drive business...
AI Solution
Blogs
Getting Started with AI: A Step-by-Step Guide for Businesses
Running a business involves making tough decisions that can impact growth and profitability.
Angular 4 to 18
Case Studies
Revitalizing a Legacy Portal: The Path from Angular 4 to 18
This project revolved around modernizing a critical management...
TrueDepth Technology
Case Studies
Modernizing Orthotics with TrueDepth Technology
The client, a leading provider of foot scanning technology for...

Let’s Start a Conversation

Request a Personalized Demo of Xorbix’s Solutions and Services

Discover how our expertise can drive innovation and efficiency in your projects. Whether you’re looking to harness the power of AI, streamline software development, or transform your data into actionable insights, our tailored demos will showcase the potential of our solutions and services to meet your unique needs.

Take the First Step

Connect with our team today by filling out your project information.

Address

802 N. Pinyon Ct,
Hartland, WI 53029

Billing Inquiries


(866) 568-8615

Information and Sales


info@xorbix.com


Services

Industries

Solutions

Solutions

Contact Us

802 N. Pinyon Ct, Hartland, WI 53029

(866) 568 8615

Facebook-f X-twitter Youtube Linkedin Instagram

Contact Us

802 N. Pinyon Ct, Hartland, WI 53029 (866) 568 8615
Facebook-f Twitter Youtube Linkedin Instagram