Angular 19 Signal-Based Reactivity, linkedSignal State, and @defer View Chunking Guardrails

--- description: Angular 19 Signal-Based Reactivity, linkedSignal State, and @defer View Chunking Guardrails - Angular 19 enforces strict zoneless-ready primitives requiring signal inputs (`input()`, `input.required()`), explicit state derivation via `linkedSignal()`, and granular chunking via template `@defer` blocks. Bypassing these primitives with legacy `@Input()` decorators, imperative `ngOnChanges` state syncing, or monolithic non-deferred component hierarchies degrades change detection performance, risks stale state synchronization bugs, and inflates initial bundle sizes. globs: src/**/*.ts, src/**/*.html alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/angular-19-signals-linked-defer-views" --- # Angular 19 Signal-Based Reactivity, linkedSignal State, and @defer View Chunking Guardrails > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Imperative State Syncing via ngOnChanges and Monolithic View Bundling Without @defer ## System Constraints You are a Principal Software Architect enforcing Angular 19 reactivity standards and template deferral architecture. Mandate modern Standalone Signal primitives (input, output, linkedSignal) and enforce @defer viewport boundaries for heavy UI subtrees. Reject legacy Decorator-driven inputs, imperative lifecycle synchronization, and unchunked visual components. ## Strict Guidelines - Engineers MUST ALWAYS use `input()` or `input.required()` instead of legacy `@Input()` decorators for component input bindings. - Engineers MUST use `linkedSignal()` when local writable state must be derived from or reset by an upstream source signal, completely eliminating `ngOnChanges` for internal state synchronization. - Engineers MUST encapsulate non-critical, below-the-fold, or computationally heavy components inside `@defer (on viewport)` blocks in component templates. - Components using `@defer` MUST provide both `@placeholder` and `@loading` blocks with appropriate layout-preserving dimensions to prevent Cumulative Layout Shift (CLS). - Components NEVER use `effect()` to synchronize inputs into local writable signals; use `linkedSignal()` instead to avoid cyclical execution and race conditions. - Services MUST expose state exclusively via `Signal<T>` (read-only) while retaining mutation authority via internal private `signal<T>` or `linkedSignal<T>` primitives. - Engineers MUST specify `prefetch on idle` or trigger-based prefetching for anticipated deferred viewport interactions to minimize visible loading latencies. ## Bad vs Good Implementations ### Synchronizing Component Input to Editable Local State #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Using `@Input` with `ngOnChanges` to synchronize state with a local `signal` requires imperative boilerplate, introduces potential timing glitches in zoneless mode, and violates signal-based unidirectional flow. ```typescript import { Component, Input, OnChanges, SimpleChanges, signal } from '@angular/core'; @Component({ selector: 'app-user-profile', standalone: true, template: `<input [value]="localUsername()" (input)="update($event)" />` }) export class UserProfileComponent implements OnChanges { @Input({ required: true }) initialUsername!: string; localUsername = signal<string>(''); // ANTI-PATTERN: Imperative synchronization creates boilerplate, // lifecycle timing bugs, and breaks zoneless signal consistency. ngOnChanges(changes: SimpleChanges): void { if (changes['initialUsername']) { this.localUsername.set(this.initialUsername); } } update(event: Event): void { const target = event.target as HTMLInputElement; this.localUsername.set(target.value); } } ``` #### Production Standard (Correct) > **Standard**: Angular 19 `input.required()` paired with `linkedSignal()` guarantees reactive synchronization whenever `initialUsername` updates, while maintaining an editable local signal without lifecycle hooks. ```typescript import { Component, input, linkedSignal } from '@angular/core'; @Component({ selector: 'app-user-profile', standalone: true, template: `<input [value]="username()" (input)="username.set($any($event.target).value)" />` }) export class UserProfileComponent { // Invariant: Signal inputs provide reactive type-safe input binding readonly initialUsername = input.required<string>(); // Invariant: linkedSignal automatically resets when source input changes, // while remaining directly writable for local mutations. readonly username = linkedSignal(() => this.initialUsername()); } ``` ### Deferring Heavy View Subtrees via Viewport Chunking #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Directly importing and rendering heavy components in the template forces bundlers to include them in the primary chunk and executes unnecessary initialization for offscreen DOM. ```typescript import { Component } from '@angular/core'; import { HeavyAnalyticsChartComponent } from './heavy-analytics-chart.component'; @Component({ selector: 'app-dashboard', standalone: true, imports: [HeavyAnalyticsChartComponent], // ANTI-PATTERN: Heavy component bundled into initial main payload // and rendered immediately regardless of viewport position. template: ` <div class="dashboard-container"> <app-heavy-analytics-chart [data]="chartData()" /> </div> ` }) export class DashboardComponent { // dashboard logic } ``` #### Production Standard (Correct) > **Standard**: Using `@defer (on viewport; prefetch on idle)` extracts `HeavyAnalyticsChartComponent` into an asynchronous chunk loaded only when visible, protecting initial bundle size and preventing layout shift via fixed-size `@placeholder` and `@loading` blocks. ```typescript import { Component } from '@angular/core'; import { HeavyAnalyticsChartComponent } from './heavy-analytics-chart.component'; @Component({ selector: 'app-dashboard', standalone: true, imports: [HeavyAnalyticsChartComponent], // Invariant: @defer triggers code-splitting and dynamic import upon viewport intersection template: ` <div class="dashboard-container"> @defer (on viewport; prefetch on idle) { <app-heavy-analytics-chart [data]="chartData()" /> } @placeholder (minimum 300ms) { <div class="chart-skeleton" style="height: 350px;">Loading placeholder...</div> } @loading (after 100ms; minimum 500ms) { <div class="chart-spinner" style="height: 350px;">Fetching chart modules...</div> } @error { <div class="chart-error">Failed to load analytics engine.</div> } </div> ` }) export class DashboardComponent { // dashboard logic } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Angular 19 Signal-Based Reactivity, linkedSignal State, and @defer View Chunking Guardrails

Angular 19 Signal-Based Reactivity, linkedSignal State, and @defer View Chunking Guardrails defines an industrial-grade behavioral standard for frontend engineering. Angular 19 enforces strict zoneless-ready primitives requiring signal inputs (`input()`, `input.required()`), explicit state derivation via `linkedSignal()`, and granular chunking via template `@defer` blocks. Bypassing these primitives with legacy `@Input()` decorators, imperative `ngOnChanges` state syncing, or monolithic non-deferred component hierarchies degrades change detection performance, risks stale state synchronization bugs, and inflates initial bundle sizes. 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: Imperative State Syncing via ngOnChanges and Monolithic View Bundling Without @defer 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	Imperative State Syncing via ngOnChanges and Monolithic View Bundling Without @defer	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 use `input()` or `input.required()` instead of legacy `@Input()` decorators for component input bindings.

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.