Angular 19 Signal-Based Reactive Graph Cycle Quarantine Standard

--- description: Angular 19 Signal-Based Reactive Graph Cycle Quarantine Standard - Enforces architectural quarantine mechanisms against reactive graph circularity and microtask starvation in zoneless Angular 19 applications. Eliminates cascading downstream signal writes, misuse of allowSignalWrites in effects, and un-isolated high-frequency event ingestion within the reactive graph. Mandates untracked boundary containment and computed derivation purity to ensure deterministic change detection passes. globs: src/**/*.ts alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/angular-19-signal-graph-cycle-quarantine-standard" --- # Angular 19 Signal-Based Reactive Graph Cycle Quarantine Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Cyclic Signal Mutations via Cascading Effects and Unbounded High-Frequency State Writes ## System Constraints You are a Principal Angular Architect enforcing zero-cycle reactive graph standards in zoneless Angular 19 systems. You must reject any reactive derivation implemented via side-effect writes, enforce strict unidirectional state flow with computed primitives, mandate untracked() boundaries for ancillary reads, and ensure high-frequency streams are quarantined before mutating the reactive graph. ## Strict Guidelines - Engineers MUST NEVER use effect() to synchronize or transform state between signals; all reactive derivations MUST use computed() to guarantee cycle-free unidirectional flow. - Engineers MUST NOT enable { allowSignalWrites: true } in effect() configurations; this option is an anti-pattern that hides cyclic feedback loops and induces microtask exhaustion. - Engineers MUST wrap secondary reads inside untracked() when an effect executes an external imperative boundary (e.g., logging, DOM manipulations, analytics) to prevent accidental dependency registration. - Engineers MUST quarantine high-frequency streaming inputs (e.g., WebSockets, mouse moves, telemetry) using RxJS schedulers, debounce, or audit windows prior to calling signal.set() or signal.update(). - Services MUST encapsulate writable signals as private and expose them strictly as readonly Signal<T> via asReadonly() to prevent external consumers from introducing circular mutation vectors. - Components NEVER read and mutate the same signal graph node within lifecycle hooks or reactive contexts without an explicit batching or untracked boundary. ## Bad vs Good Implementations ### Anti-Pattern: Inter-Signal Synchronization via Effect with allowSignalWrites #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Using effect() with allowSignalWrites: true to project state into another writable signal causes multiple change detection passes, risks infinite loops if downstream signals feed back into multiplier, and violates zoneless change detection scheduling constraints. ```typescript import { Component, signal, effect, inject } from '@angular/core'; import { MetricsService } from './metrics.service'; @Component({ selector: 'app-telemetry-monitor', standalone: true, template: `<div>Rate: {{ normalizedRate() }}</div>` }) export class TelemetryMonitorComponent { private metrics = inject(MetricsService); rawCounter = signal(0); normalizedRate = signal(0); constructor() { // DANGEROUS: Circular vulnerability & multi-pass dirty checking effect(() => { const current = this.rawCounter(); const baseMultiplier = this.metrics.multiplier(); // Mutating another signal inside effect triggers immediate microtask invalidation this.normalizedRate.set(current * baseMultiplier); }, { allowSignalWrites: true }); } } ``` #### Production Standard (Correct) > **Standard**: Deriving state via computed() produces an immutable, memoized reactive node evaluated lazily on demand. It guarantees topological evaluation ordering and eliminates runtime cycle hazards without triggering synthetic change detection cycles. ```typescript import { Component, signal, computed, inject } from '@angular/core'; import { MetricsService } from './metrics.service'; @Component({ selector: 'app-telemetry-monitor', standalone: true, template: `<div>Rate: {{ normalizedRate() }}</div>` }) export class TelemetryMonitorComponent { private metrics = inject(MetricsService); readonly rawCounter = signal(0); // PURE: Cycle-safe topological dependency derivation readonly normalizedRate = computed(() => { return this.rawCounter() * this.metrics.multiplier(); }); } ``` ### Anti-Pattern: Implicit Effect Dependency Loop with External Analytics #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: The effect implicitly tracks interactionCount(), causing the tracking effect to execute erroneously on button clicks even when filterQuery has not changed, creating unintended reactive coupling. ```typescript import { Component, signal, effect, inject } from '@angular/core'; import { AnalyticsTracker } from './analytics.tracker'; @Component({ selector: 'app-filter-view', standalone: true, template: `<button (click)="increment()">Filter</button>` }) export class FilterViewComponent { private tracker = inject(AnalyticsTracker); filterQuery = signal('active'); interactionCount = signal(0); constructor() { effect(() => { // Intent: send analytics when filterQuery changes const query = this.filterQuery(); // Bug: Reading interactionCount() accidentally registers it as a dependency this.tracker.logQuery(query, this.interactionCount()); }); } increment() { this.interactionCount.update(c => c + 1); } } ``` #### Production Standard (Correct) > **Standard**: Wrapping secondary reads in untracked() quarantines the dependency graph. The effect only fires when filterQuery emits, preventing spurious side-effect cascades and maintaining stable execution frequency. ```typescript import { Component, signal, effect, untracked, inject } from '@angular/core'; import { AnalyticsTracker } from './analytics.tracker'; @Component({ selector: 'app-filter-view', standalone: true, template: `<button (click)="increment()">Filter</button>` }) export class FilterViewComponent { private tracker = inject(AnalyticsTracker); readonly filterQuery = signal('active'); readonly interactionCount = signal(0); constructor() { effect(() => { const query = this.filterQuery(); // Quarantine secondary dependencies to isolate graph updates const count = untracked(() => this.interactionCount()); this.tracker.logQuery(query, count); }); } increment() { this.interactionCount.update(c => c + 1); } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Angular 19 Signal-Based Reactive Graph Cycle Quarantine Standard

Angular 19 Signal-Based Reactive Graph Cycle Quarantine Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces architectural quarantine mechanisms against reactive graph circularity and microtask starvation in zoneless Angular 19 applications. Eliminates cascading downstream signal writes, misuse of allowSignalWrites in effects, and un-isolated high-frequency event ingestion within the reactive graph. Mandates untracked boundary containment and computed derivation purity to ensure deterministic change detection passes. 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 Mutations via Cascading Effects and Unbounded High-Frequency State Writes 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 Mutations via Cascading Effects and Unbounded High-Frequency State Writes	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 NEVER use effect() to synchronize or transform state between signals

Engineers MUST NEVER use effect() to synchronize or transform state between signals; all reactive derivations MUST use computed() to guarantee cycle-free unidirectional flow.

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.