Project Name
Angular Signals Migration for a Large EdTech Platform: 4x Faster Interaction Response on High-Density Pages Without a Rewrite
A large-enterprise EdTech platform delivering assessment and polling tools to universities, corporate training programmes, and professional certification bodies had a performance problem concentrated on its most-used screens. The Tests dashboard, dense with interactive elements, was triggering Zone.js global change detection across hundreds of unrelated components on every user action. Every click, keystroke, and toggle re-evaluated the entire component tree regardless of whether any component’s data had changed. Interaction to Next Paint scores were outside Core Web Vitals passing thresholds under real user load, and the problem compounded with every feature addition. The engineering team knew the root cause but had no incremental migration path that did not require a full application rewrite. Ksolves migrated the high-impact pages to Angular Signals, reducing INP by 4x on the most-complained-about screens without touching the rest of the application.
- Zone.js Global Change Detection on Dense Pages: Angular's Zone.js change detection ran globally on every user interaction, triggering re-evaluation of every component in the tree regardless of whether that component's data had changed. On the Tests dashboard with hundreds of active components, this overhead was measurable and user-visible.
- INP Degradation Under Real User Load: Interaction to Next Paint scores on the Tests dashboard and similar high-density pages were outside acceptable Core Web Vitals thresholds under real usage conditions, contributing to poor Lighthouse scores and a sluggish interaction feel that instructors and learners actively reported.
- No Incremental Migration Path with Zone.js: The team could not selectively disable Zone.js change detection for specific pages without either adopting OnPush detection across the entire component tree or accepting a complete rewrite of the affected screens, both high-risk paths for a production application with continuous delivery.
- Redundant Component Re-renders on Every Interaction: Profiling revealed that the majority of change detection cycles on dense pages were redundant. Components whose inputs had not changed were being re-evaluated on every interaction because Zone.js had no mechanism to scope detection to only the components that actually needed updating.
- Performance Debt Compounding with Every Feature Addition: Each new interactive element added to a high-density page increased the Zone.js change detection surface area, meaning the performance problem grew worse with every sprint rather than stabilising.
Ksolves delivered a targeted Angular Signals migration on the highest-impact pages, replacing Zone.js-driven reactivity with fine-grained signal-based state management that limits change detection to only the components whose state has actually changed. The strategy was high-impact pages first, not a whole-application rewrite: deliver measurable INP improvements on the screens users were complaining about, validate the approach, then extend incrementally.
- Angular Signals Adoption on High-Density Pages: State management on the Tests dashboard and associated high-density screens was migrated from Zone.js-reactive patterns to Angular Signals, replacing broad observable chains and component inputs with fine-grained signal primitives that trigger re-renders only in the components that consume them.
- Zone.js Change Detection Scope Reduction: Signals adoption was combined with ChangeDetectionStrategy.OnPush on migrated components to narrow the change detection surface area, ensuring that Zone.js, where still active, only evaluates components that have received new inputs or triggered signal updates rather than the full component tree.
- Computed Signals for Derived State: Expensive recalculated getters and pipe-heavy template expressions on dense pages were replaced with computed signals that cache derived state and recompute only when their source signals change, eliminating a class of redundant calculations that had been running on every change detection cycle.
- Effect-Based Side Effect Management: Asynchronous side effects triggered by state changes were migrated from Zone.js-patched promise chains and subscriptions to Angular Signals effects, making the reactive data flow explicit and predictable while removing a category of Zone.js re-entry events contributing to detection overhead.
- Incremental Page-by-Page Rollout: The migration was executed page-by-page rather than as a single large change, allowing the team to measure INP improvements per screen, validate stability in production, and maintain the ability to roll back individual pages independently without affecting the rest of the application.
Technology Stack
| Category | Technology |
|---|---|
| Frontend Framework | Angular |
| Reactivity Layer | Angular Signals |
| Change Detection | ChangeDetectionStrategy.OnPush |
| Legacy Layer | Zone.js (retained for non-migrated pages) |
| Performance Measurement | Chrome DevTools, Lighthouse |
- 4x INP Improvement on High-Density Pages: Angular Signals migration reduced Interaction to Next Paint by approximately 4x on migrated high-density pages, bringing interaction responsiveness within Core Web Vitals passing thresholds on the screens that had generated the most user complaints.
- Redundant Component Re-Renders Eliminated by Design: Signal-based reactivity limits re-renders to components that consume changed signals. Redundant detection cycles on migrated pages are structurally eliminated, replacing a system where the majority of change detection work was unnecessary with one where only affected components update.
- Performance Trend Reversed on Migrated Pages: Signals-based pages now scale sub-linearly. Adding new components does not increase detection overhead for unrelated components, breaking the accumulating performance debt pattern that had compounded with every feature addition.
- Full Application Rewrite Avoided: Page-by-page Signals migration delivered measurable INP improvements per screen with isolated rollback risk and no disruption to the team's continuous delivery cadence, removing the binary choice between accepting degraded performance and rebuilding the application from scratch.
“The Tests dashboard had been the most complained-about screen in the product for two years. After the Signals migration, it felt like a different application, not because we changed what it does, but because it finally responds the way users expect. We did not rewrite anything.”
–VP Engineering, Large EdTech Platform, North America
Ksolves delivers Angular performance engineering and frontend development services for EdTech and SaaS platforms managing complex, data-dense interfaces where Zone.js change detection overhead is degrading Core Web Vitals under real user load.
Before this engagement, the platform’s most-used screens were compounding performance debt with every feature addition, with no incremental migration path available that did not require a full rewrite. After the Angular Signals migration, INP improved 4x on high-density pages, redundant re-renders were eliminated by design, and performance now scales sub-linearly as the product continues to grow.
The Angular Signals migration pattern applies to any mature Angular application where Core Web Vitals are degrading as page complexity grows incrementally, with low risk, and delivers results on the screens that matter most without touching the rest of the codebase.
Is Zone.js Global Change Detection Making Your Angular Application Feel Slower with Every Feature You Ship?
