Switching to Angular 18 needed to be done without any lag or crash that would cause a glitch in operations. As a platform serving businesses from startups to large enterprises, Site24x7’s mission has always been to deliver the latest and fastest frameworks and functionalities felt at the front end—the face of the product. To keep up, Site24x7 successfully migrated to Angular 18, ensuring a seamless transition that maintained operational trust for its users.

This engineering blog recounts our Angular migration journey, with insights and best practices to share for product teams aiming to transition their applications to the latest Angular framework. By sharing our challenges, strategies, and wins, we aim to record our unique experience of navigating large-scale framework migrations.

Why was migration necessary?

Site24x7 adopted AngularJS over a decade ago when it was a mature and reliable framework. However, its end of support in December 2021 marked a turning point. Without updates or patches, security risks and compatibility issues threatened platform reliability. Additionally, Site24x7’s growing scale, which supports over 500 monitor types that are displayed on complex dashboards and widgets for a diverse user base, demanded a robust, scalable framework.

Angular 18 offers modern web capabilities, such as lazy loading and TypeScript, essential for delivering real-time observability and meeting user expectations for intuitive, high-performance interfaces.

The migration strategy and execution journey

Site24x7 adopted a web component approach using Angular’s ngUpgrade library, allowing AngularJS and Angular 18 to coexist. This strategy ensured flexibility and minimal disruption, avoiding downtime for users who rely on 24/7 observability. The migration was akin to upgrading a car’s transmission while driving—challenging, but essential to keep features unified and transitions smooth.

The execution journey involved several key steps:

• Routing unification: AngularJS relied on UIRouter’s state-based navigation, while Angular 18 used URL-based routing. To bridge this gap, Site24x7 implemented a wrapper router service that handled both systems, preventing UI inconsistencies and ensuring seamless navigation.
• Tracking more than 1,500 items: With over 1,500 components, directives, and services to migrate, Site24x7 developed a custom tracking tool. This tool maintained a real-time inventory of migrated and pending items, parsing files to monitor progress and ensure team accountability.
• Split builds and phased deployment: Separate builds for AngularJS and Angular 18 enabled gradual rollouts. Feature flags facilitated controlled transitions to the new framework, keeping Site24x7 operational throughout. The process resembled the Ship of Theseus , with parts replaced incrementally to form a brand-new platform while maintaining functionality.
• Incremental migration: The team audited the codebase, prioritized core observability features like dashboards and alerts, and tested rigorously at each phase to ensure stability.

Challenges tackled

Migrating a large-scale application like Site24x7 presented several challenges, many of which are common in similar framework migrations:

• Third-party library selection: Many AngularJS dependencies, especially jQuery-based plugins, were incompatible with Angular 18’s component-based architecture. The team carefully evaluated and selected modern, actively maintained libraries within the Angular ecosystem, avoiding legacy patches that could introduce instability.
• Routing differences: Bridging UIRouter and Angular’s router required a wrapper service to handle state and URL navigation dynamically, preventing code duplication and ensuring a unified user experience.
• Code logic split by environment: Some components needed to behave differently in AngularJS versus Angular 18 environments. Site24x7 built an environment-specific logic system, allowing web components to adapt based on their runtime context.
• Migration status tracking: Managing ownership across multiple teams was critical. The custom tracking page provided visibility into migration progress, extended to support Angular components, and ensured accountability.
• Architectural mismatches: AngularJS’s controller-based structure clashed with Angular 18’s component model. Careful mapping of directives to components prevented functionality breaks.
• Performance dips: Mid-migration inefficiencies risked slowing dashboards, disrupting real-time insights. Early implementation of lazy loading and API cancellation mitigated these risks.
• User experience disruptions: An inconsistent UI or broken navigation could confuse users. Unified styling and end-to-end testing ensured a cohesive interface.
• Resource underestimation: Underplanning could have delayed fixes, leaving Site24x7 vulnerable. A thorough audit and team alignment prevented bottlenecks.

Key wins after migration

The migration to Angular 18 delivered significant improvements:

• Development boosts: Angular 18’s ecosystem—CLI, extensions, and CI/CD pipelines—streamlined workflows, enabling rapid observability enhancements.
• Feature upgrades: Enhanced dashboards and monitor configurations provided more powerful tools for tracking IT health.
• Performance gains: Lazy loading reduced initial load times by approximately 30%, and API cancellation minimized redundant requests, ensuring uninterrupted monitoring.
• User improvements: A consistent, modern UI with smoother navigation improved usability for managing alerts and metrics.

Benefits of migration

Migrating to Angular 18 enhanced Site24x7 with:

• Zero-downtime observability: A hybrid approach during migration ensured 24/7 IT operations without crashes.
• Faster incident response: Optimized performance reduces dashboard refresh times for quicker alert access.
• Scalable architecture: Angular 18 supports growth with lazy loading and advanced routing.
• Enhanced security: Built-in protections safeguard data integrity, bolstering trust.
• Improved user experience: A modern UI and smoother navigation offer intuitive interfaces.
• Better maintainability: The modular design simplifies updates for evolving IT needs.
• Empowered developers: Angular CLI, TypeScript, and ESLint accelerate feature development.
• Future-proof scalability: Angular 18’s architecture supports Site24x7’s growth without compromising stability.

Lessons learned

Site24x7’s migration journey offered valuable lessons for avoiding common pitfalls:

• Incremental over full rewrite: A gradual shift using ngUpgrade prevented operational halts, unlike a risky big-bang rewrite.
• Rigorous testing: Unit tests, end-to-end tests, and performance benchmarks caught issues early, preserving monitoring capabilities.
• Documentation and team alignment: Comprehensive records and regular syncs kept the team focused on stability and deadlines.
• Proactive security reviews: Early vulnerability checks protected users during the transition.

Best practices for framework migrations

Based on Site24x7’s experience, here are actionable best practices for teams migrating to the latest Angular framework:

• Conduct a requirements study: Analyze all migration paths, mapping dependencies and risks to inform planning.
• Plan incrementally: Break the migration into phases, prioritizing core features to maintain uptime.
• Prioritize stability: Focus on critical functionality (e.g., monitors) to prevent operational risks.
• Test relentlessly: Use automated unit and end-to-end tests to catch regressions. Performance benchmarks ensure no slowdowns.
• Optimize early: Implement lazy loading, tree-shaking, and API optimizations during migration to boost performance from the start.
• Leverage hybrid tools: Use ngUpgrade to enable AngularJS and Angular coexistence, ensuring gradual component replacement.
• Track progress: Develop tools to monitor migrated components, maintaining transparency and accountability across teams.

Migrating to Angular 18 transformed Site24x7 into a faster, more secure, and scalable IT observability platform. The hybrid approach, rigorous testing, and performance optimizations ensured zero downtime, reinforcing trust for users worldwide.

A few statistics

• Web components vs. stand-alone app: The web component approach reduced migration time by approximately 40% compared to a stand-alone app rewrite, based on internal estimates.
• Page loading improvements: The first release of a business unit migration achieved a 25% reduction in page load times, setting a benchmark for subsequent phases.
• Migration scale: Over 1,500 components, directives, and services were migrated, with the custom tracking tool ensuring no feature was overlooked.