Skip to main content

Posts

Showing posts with the label TypeScript

Angular Zoneless Architecture: Handling 'ExpressionChangedAfterItHasBeenChecked' with Signals

  Removing   zone.js   reduces bundle size and improves stack trace clarity, but it does not remove the fundamental laws of Angular's Unidirectional Data Flow. In fact, relying purely on Signals can expose race conditions in your reactive graph that Zone.js previously masked (or managed differently). One specific edge case in enterprise applications involves "Layout Thrashing" scenarios: a child component renders, calculates a dimension based on its content, and attempts to update a shared Signal that drives the parent's layout. In a Zoneless environment, doing this naïvely within an  effect  triggers  ExpressionChangedAfterItHasBeenCheckedError  (NG0100) or, worse, an infinite change detection loop. The Root Cause: Signal Graph Instability In the Zone.js era, this error occurred because a lifecycle hook (like  ngAfterViewInit ) updated a property that had already been bound to the DOM in the parent view. Angular had finished checking the parent, ...

Svelte 5 Migration: Refactoring Complex RxJS Stores to Runes ($state)

  The Hook You are migrating a large-scale Svelte 4 application to Svelte 5. You have heavily relied on RxJS  BehaviorSubjects  or complex observable chains to manage asynchronous state (websockets, search typeaheads, complex data modeling). In Svelte 4, the auto-subscription syntax ( $store ) made RxJS interoperability seamless. In Svelte 5, however, the paradigm shifts to Runes ( $state ,  $derived ). Attempting to mix the push-based nature of RxJS with the pull-based, granular reactivity of Runes often results in "reactivity gaps"—where the UI fails to update because the Signal graph doesn't realize the Observable stream has emitted a new value. The Why: Signal Graph vs. Event Stream The fundamental issue lies in how Svelte 5 tracks dependencies. Svelte 4 (Compiled Reactivity):  The  $  prefix was compiler sugar. It generated code to  .subscribe()  to the store and trigger a component invalidate on every emission. Svelte 5 (Runtime Signals...