Angular 19 Zoneless Signal Graph Cycle & Microtask Starvation Prevention

--- description: Angular 19 Zoneless Signal Graph Cycle & Microtask Starvation Prevention - Enforces strict Directed Acyclic Graph (DAG) topologies across Angular 19 zoneless signal architectures to prevent microtask queue starvation, continuous re-render churn, and runtime cycle exceptions (such as NG0600 or NG0103). Mandates unidirectional data flow by prohibiting cyclic signal mutations within effects and enforcing pure, derivation-based computed signals. globs: src/**/*.ts alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/angular-19-zoneless-signal-cycle-guardrail" --- # Angular 19 Zoneless Signal Graph Cycle & Microtask Starvation Prevention > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Cyclic Signal Mutation in Effects or Cross-Signal Ping-Pong Starving the Microtask Queue ## System Constraints You are a Principal Software Architect enforcing reactive integrity in Angular 19 zoneless applications. In zoneless mode, Angular relies entirely on signal notifications to schedule microtasks for component change detection traversal. Cyclic signal updates directly cause infinite loops and microtask queue starvation. You MUST enforce Directed Acyclic Graph (DAG) invariants, reject signal writes inside effects that introduce feedback loops, eliminate `allowSignalWrites: true` anti-patterns, and convert bidirectional synchronization patterns into pure `computed()` derivations. ## Strict Guidelines - Engineers MUST ALWAYS structure signal graphs as Directed Acyclic Graphs (DAGs) where state flows strictly downstream to derived computations and consumer templates. - Engineers MUST NOT mutate signals inside `effect()` blocks using `{ allowSignalWrites: true }` to synchronize state; derived representations MUST be modeled via pure `computed()` signals. - Engineers MUST use `untracked()` whenever an `effect()` performs unavoidable side effects reading peripheral signals that should not trigger re-execution. - Services MUST NEVER configure interdependent signals that establish ping-pong feedback loops or mutual state synchronizers. - Components NEVER execute side effects, signal writes, or imperative state mutations inside `computed()` evaluation functions. - Engineers MUST dispatch state mutations through explicit transactional methods or commands rather than implicitly triggering cascaded writes across reactive effects. ## Bad vs Good Implementations ### Circular Signal Synchronization in Effects vs Pure Derived Computations #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Using bidirectional effects with allowSignalWrites creates a cyclic dependency in the zoneless microtask scheduler. Mutating rawFilter inside an effect that responds to sanitizedFilter causes infinite re-queuing of microtasks, starving browser frames and crashing with loop detection errors. ```typescript import { Component, effect, signal } from '@angular/core'; @Component({ selector: 'app-user-filter', template: `<input [value]="rawFilter()" (input)="onInput($event)" />` }) export class UserFilterComponent { rawFilter = signal(''); sanitizedFilter = signal(''); constructor() { // Anti-Pattern: Effect mutating a signal creates an unstable microtask loop effect(() => { const raw = this.rawFilter(); this.sanitizedFilter.set(raw.trim().toLowerCase()); }, { allowSignalWrites: true }); // Anti-Pattern: Circular feedback loop triggering microtask starvation effect(() => { const sanitized = this.sanitizedFilter(); if (sanitized.length > 20) { this.rawFilter.set(sanitized.slice(0, 20)); } }, { allowSignalWrites: true }); } onInput(event: Event): void { this.rawFilter.set((event.target as HTMLInputElement).value); } } ``` #### Production Standard (Correct) > **Standard**: Replaces mutable synchronization with a pure computed derivation. The reactive graph remains a strict DAG with no microtask re-scheduling loops, ensuring deterministic change detection without zone overhead. ```typescript import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core'; @Component({ selector: 'app-user-filter', template: `<input [value]="rawFilter()" (input)="onInput($event)" />`, changeDetection: ChangeDetectionStrategy.OnPush }) export class UserFilterComponent { readonly rawFilter = signal<string>(''); // Invariant Fix: Pure DAG node via computed() eliminates reactive feedback loops readonly sanitizedFilter = computed<string>(() => { const raw = this.rawFilter(); return raw.trim().toLowerCase().slice(0, 20); }); // Invariant Fix: Single source of mutation driven by explicit user intent onInput(event: Event): void { const inputElement = event.target as HTMLInputElement; const boundedValue = inputElement.value.slice(0, 20); this.rawFilter.set(boundedValue); } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Angular 19 Zoneless Signal Graph Cycle & Microtask Starvation Prevention

Angular 19 Zoneless Signal Graph Cycle & Microtask Starvation Prevention defines an industrial-grade behavioral standard for frontend engineering. Enforces strict Directed Acyclic Graph (DAG) topologies across Angular 19 zoneless signal architectures to prevent microtask queue starvation, continuous re-render churn, and runtime cycle exceptions (such as NG0600 or NG0103). Mandates unidirectional data flow by prohibiting cyclic signal mutations within effects and enforcing pure, derivation-based computed signals. 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: Cyclic Signal Mutation in Effects or Cross-Signal Ping-Pong Starving the Microtask Queue 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	Cyclic Signal Mutation in Effects or Cross-Signal Ping-Pong Starving the Microtask Queue	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:

Engineers MUST ALWAYS structure signal graphs as Directed Acyclic Graphs (DAGs) where state flows strictly downstream to derived computations and consumer templates.

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.