Angular 19 Signals Architecture and Declarative Defer View Boundaries

--- description: Angular 19 Signals Architecture and Declarative Defer View Boundaries - Enforces strict Angular 19 reactive primitives by prohibiting legacy Zone.js patterns and manual lifecycle synchronization. Mandates signal inputs, linkedSignal for resettable mutable state derivations, and strictly paired @defer blocks with deterministic placeholder and error boundaries. Guarantees reactive isolation and optimal incremental hydration. globs: src/**/*.ts, src/**/*.html alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/angular-19-signals-defer-guardrail" --- # Angular 19 Signals Architecture and Declarative Defer View Boundaries > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mixing Zone-driven decorators, mutable input copies, and unguarded defer blocks ## System Constraints You are a Principal Software Architect enforcing modern Angular 19 reactive architectures. You mandate zoneless-ready primitives, strictly replacing @Input() and ngOnChanges with input()/input.required() and linkedSignal(). You mandate that incremental chunking via @defer must enforce paired @placeholder, @loading, and @error blocks to prevent layout shifts and uncaught runtime chunk load failures. ## Strict Guidelines - Components MUST declare reactive inputs using `input()` or `input.required()`; legacy `@Input()` decorators are strictly forbidden. - Engineers MUST NOT synchronize input state using `ngOnChanges` or manual property mutation; derive reset-capable mutable local state exclusively via `linkedSignal()`. - Engineers MUST NOT invoke `effect()` to write to writable signals (`signal.set()` or `signal.update()`); use `computed()` for read-only derived state or `linkedSignal()` when mutable divergence is required. - Templates leveraging `@defer` MUST ALWAYS declare `@placeholder` with explicit minimum dimensional bounds to prevent Cumulative Layout Shift (CLS). - Templates leveraging `@defer` MUST ALWAYS declare `@error` blocks to gracefully handle network partition during dynamic chunk acquisition. - Services exposing asynchronous streams MUST convert RxJS Observables to Signals using `toSignal()` at the boundary to maintain zoneless-compatible pull-based reactivity. ## Bad vs Good Implementations ### Local Writable Derived State: ngOnChanges Anti-pattern vs. linkedSignal #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Relies on Zone-dependent lifecycle hook ngOnChanges and mutable un-tracked class fields, failing in pure Zoneless mode and causing edge-case race conditions during input reconciliation. ```typescript import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; @Component({ selector: 'app-user-profile', standalone: true, template: `<input [value]="localDisplayName" (input)="onInput($event)" />` }) export class UserProfileComponent implements OnChanges { @Input({ required: true }) user!: { id: string; name: string }; localDisplayName = ''; ngOnChanges(changes: SimpleChanges): void { if (changes['user'] && this.user) { this.localDisplayName = this.user.name; } } onInput(event: Event): void { const target = event.target as HTMLInputElement; this.localDisplayName = target.value; } } ``` #### Production Standard (Correct) > **Standard**: Uses Angular 19 `input.required()` and `linkedSignal()`. The signal automatically resets when the source input reference updates, while allowing local writable mutations without any lifecycle hooks. ```typescript import { Component, input, linkedSignal, ChangeDetectionStrategy } from '@angular/core'; interface User { id: string; name: string; } @Component({ selector: 'app-user-profile', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: ` <input [value]="localDisplayName()" (input)="localDisplayName.set($any($event.target).value)" /> ` }) export class UserProfileComponent { readonly user = input.required<User>(); // Automatically updates when user() changes, but remains locally mutable readonly localDisplayName = linkedSignal<User, string>({ source: () => this.user(), computation: (source) => source.name }); } ``` ### Deferred View Chunking: Unguarded @defer vs. Robust Invariant @defer #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Lacks @placeholder, @loading, and @error blocks. Viewport trigger with zero-sized initial projection causes false positives and severe layout shifts (CLS), and network failures drop silently without UI recovery. ```typescript import { Component } from '@angular/core'; import { HeavyChartComponent } from './heavy-chart.component'; @Component({ selector: 'app-analytics-view', standalone: true, imports: [HeavyChartComponent], template: `  @defer (on viewport) { <app-heavy-chart /> } ` }) export class AnalyticsViewComponent {} ``` #### Production Standard (Correct) > **Standard**: Defines explicit dimensions in @placeholder to guarantee layout stability, pairs @placeholder with @loading and @error, and optimizes resource fetching with idle prefetching. ```typescript import { Component, ChangeDetectionStrategy } from '@angular/core'; import { HeavyChartComponent } from './heavy-chart.component'; @Component({ selector: 'app-analytics-view', standalone: true, imports: [HeavyChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: ` @defer (on viewport; prefetch on idle) { <app-heavy-chart /> } @placeholder (minimum 300ms) { <div class="chart-skeleton" style="min-height: 400px; width: 100%;" aria-hidden="true"></div> } @loading (minimum 200ms) { <div class="chart-spinner" style="min-height: 400px;">Loading metrics...</div> } @error { <div role="alert" class="chart-error"> <p>Failed to load analytics engine.</p> </div> } ` }) export class AnalyticsViewComponent {} ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Angular 19 Signals Architecture and Declarative Defer View Boundaries

Angular 19 Signals Architecture and Declarative Defer View Boundaries defines an industrial-grade behavioral standard for frontend engineering. Enforces strict Angular 19 reactive primitives by prohibiting legacy Zone.js patterns and manual lifecycle synchronization. Mandates signal inputs, linkedSignal for resettable mutable state derivations, and strictly paired @defer blocks with deterministic placeholder and error boundaries. Guarantees reactive isolation and optimal incremental hydration. 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: Mixing Zone-driven decorators, mutable input copies, and unguarded defer blocks 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	Mixing Zone-driven decorators, mutable input copies, and unguarded defer blocks	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:

Components MUST declare reactive inputs using `input()` or `input.required()`

Components MUST declare reactive inputs using `input()` or `input.required()`; legacy `@Input()` decorators are strictly forbidden.

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.