Angular 19 Zoneless Signals & Deterministic Change Detection Guardrail

--- description: Angular 19 Zoneless Signals & Deterministic Change Detection Guardrail - Enforces strict zoneless architecture in Angular 19 by removing Zone.js runtime monkey-patching in favor of explicit reactive signals and microtask scheduling. Prevents silent UI update failures caused by untracked mutable class properties modified during asynchronous events. Mandates the use of Signal primitives, resource APIs, and RxJS-to-Signal bridges across all presentation and state layers. globs: src/**/*.ts alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/angular-19-zoneless-signals-guardrail" --- # Angular 19 Zoneless Signals & Deterministic Change Detection Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mutating Un-signaled Class Properties in Async Handlers Under Zoneless Execution ## System Constraints You are a Principal Angular Architect enforcing Angular 19 Zoneless change detection standards. Zone.js is completely eliminated from the runtime. You must reject any code that relies on implicit monkey-patched change detection, un-signaled mutable state, or raw asynchronous subscriptions without Signal interop. All UI state must be driven by Signal primitives (signal, computed, input, output, model, viewChild, rxResource) to guarantee deterministic microtask scheduling and zero memory leaks. ## Strict Guidelines - Application configuration MUST bootstrap with provideExperimentalZonelessChangeDetection() and remove all 'zone.js' imports from polyfills and build configuration. - Components MUST declare ChangeDetectionStrategy.OnPush explicitly, even under zoneless, to maintain strict sub-tree scheduling semantics. - Engineers MUST NOT rely on mutable plain class properties for template bindings; all state consumed by templates MUST be Angular Signals (signal(), computed(), or toSignal()). - Asynchronous RxJS streams MUST be bridged to Signals using toSignal() or consumed via rxResource() rather than manually subscribing and mutating instance properties. - DOM inputs, outputs, and queries MUST use Signal-based APIs (input(), output(), model(), viewChild(), viewChildren()) instead of legacy decorators (@Input, @Output, @ViewChild). - Effects (effect()) MUST NOT be used for state synchronization or setting signals; restrict effect() strictly to external side effects (e.g., logging, third-party canvas or DOM charting initialization). - Code interacting with legacy APIs outside the reactive graph MUST explicitly inject ChangeDetectorRef and call markForCheck() or inject NgZone and verify zoneless fallback. ## Bad vs Good Implementations ### Zoneless Component State and Data Fetching #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: In a zoneless application, Zone.js is absent, meaning setTimeout, Promise resolutions, and unmanaged RxJS subscriptions do not trigger automatic dirty-checking. Mutating 'this.user' directly results in stale UI because no Signal notification was registered with the reactive graph scheduler. ```typescript import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-user-profile', standalone: true, template: ` <div> <h3>{{ user?.name ?? 'Loading...' }}</h3> <button (click)="updateStatus()">Update Active</button> </div> ` }) export class UserProfileComponent implements OnInit { // Anti-pattern: Untracked mutable property; in zoneless Angular, mutation inside // asynchronous subscription or timer will not trigger change detection. user: { name: string; active: boolean } | null = null; constructor(private http: HttpClient) {} ngOnInit(): void { this.http.get<{ name: string; active: boolean }>('/api/user').subscribe((res) => { this.user = res; }); } updateStatus(): void { setTimeout(() => { if (this.user) { this.user.active = true; // Broken: Zoneless engine ignores un-notified setTimeout mutation } }, 500); } } ``` #### Production Standard (Correct) > **Standard**: Utilizes Angular 19 rxResource to natively connect the HTTP observable to a Signal without manual subscriptions. Local mutation is managed through signal.update(), which synchronously informs Angular's consumer graph to schedule a microtask render pass. ```typescript import { Component, ChangeDetectionStrategy, inject, signal } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { rxResource } from '@angular/core/rxjs-interop'; interface User { name: string; active: boolean; } @Component({ selector: 'app-user-profile', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: ` <div> @if (userResource.isLoading()) { <p>Loading...</p> } @else if (userResource.value(); as user) { <h3>{{ user.name }} ({{ isActive() ? 'Active' : 'Inactive' }})</h3> <button (click)="toggleStatus()">Toggle Status</button> } </div> ` }) export class UserProfileComponent { private readonly http = inject(HttpClient); // Production Invariant: Signal-based HTTP resource via rxResource readonly userResource = rxResource({ loader: () => this.http.get<User>('/api/user') }); // Local state managed via explicit Signal readonly isActive = signal<boolean>(false); toggleStatus(): void { // Deterministically schedules template re-render via microtask queue this.isActive.update((status) => !status); } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Angular 19 Zoneless Signals & Deterministic Change Detection Guardrail

Angular 19 Zoneless Signals & Deterministic Change Detection Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces strict zoneless architecture in Angular 19 by removing Zone.js runtime monkey-patching in favor of explicit reactive signals and microtask scheduling. Prevents silent UI update failures caused by untracked mutable class properties modified during asynchronous events. Mandates the use of Signal primitives, resource APIs, and RxJS-to-Signal bridges across all presentation and state layers. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Mutating Un-signaled Class Properties in Async Handlers Under Zoneless Execution Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Mutating Un-signaled Class Properties in Async Handlers Under Zoneless Execution	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Application configuration MUST bootstrap with provideExperimentalZonelessChangeDetection() and remove all 'zone.js' imports from polyfills and build configuration.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.