Angular 19 Signal Primitives, linkedSignal Derivations, and Deferred Viewport Chunking

--- description: Angular 19 Signal Primitives, linkedSignal Derivations, and Deferred Viewport Chunking - Enforces modern Angular 19 standalone architecture using signal inputs, signal-based outputs, linkedSignal for resettable/derived state, and production-hardened @defer blocks. Prevents architectural anti-patterns such as writing to signals inside effects, using legacy decorator inputs, and defer blocks lacking layout stability constraints. 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-architectural-guardrail" --- # Angular 19 Signal Primitives, linkedSignal Derivations, and Deferred Viewport Chunking > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mutating Signals in Effects for State Sync and Naked @defer Directives Causing Cumulative Layout Shift (CLS) ## System Constraints You are a Principal Angular Architect enforcing Angular 19 design invariants. You must mandate zoneless-ready standalone signal APIs, reject legacy decorators (@Input, @Output, @ViewChild), prohibit writing to writable signals inside effects to synchronize state (enforcing linkedSignal instead), and ensure all @defer blocks declare layout-stable placeholders and intelligent prefetch strategies. ## Strict Guidelines - Engineers MUST ALWAYS use `input()` and `input.required()` for component inputs, and `output()` for component event emitters. - Engineers MUST NOT use legacy decorators (`@Input`, `@Output`, `@ViewChild`, `@ContentChild`) in Angular 19 codebases. - Engineers MUST NOT write to standard `signal()` primitives inside an `effect()` to reset or sync state from inputs; `linkedSignal()` MUST be used for state that derives from an input but requires local mutability. - Code MUST use `computed()` exclusively for pure, read-only derivations without side effects. - All `@defer` blocks MUST provide a `@placeholder` with an explicit minimum display time or CSS-enforced dimensions to prevent Cumulative Layout Shift (CLS). - All `@defer` blocks triggered on viewport interaction MUST configure an earlier prefetch trigger (e.g., `prefetch on idle` or `prefetch on immediate`). - Deferred components MUST BE standalone and MUST NOT be referenced directly outside `@defer` within the same compilation unit, or bundle-splitting boundaries will collapse. ## Bad vs Good Implementations ### Local State Resynchronization: effect() Anti-Pattern vs linkedSignal() #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Using effect() with allowSignalWrites to synchronize local mutable state from an input causes duplicate change-detection cycles, risks circular signal writes, and relies on deprecated legacy decorators. ```typescript import { Component, Input, signal, effect } from '@angular/core'; @Component({ selector: 'app-user-editor', template: `<input [value]="draftName()" (input)="updateDraft($event)" />` }) export class UserEditorComponent { @Input() initialName = ''; draftName = signal(''); constructor() { // ANTI-PATTERN: Synchronizing state via effect requires allowSignalWrites and causes extra microtask turns effect(() => { this.draftName.set(this.initialName); }, { allowSignalWrites: true }); } updateDraft(event: Event): void { this.draftName.set((event.target as HTMLInputElement).value); } } ``` #### Production Standard (Correct) > **Standard**: linkedSignal cleanly encapsulates local state derivation that automatically resets when the source signal changes, remaining completely zoneless-safe with no redundant microtasks or effects. ```typescript import { Component, input, linkedSignal, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-user-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: `<input [value]="draftName()" (input)="updateDraft($event)" />` }) export class UserEditorComponent { // Signal Input readonly initialName = input.required<string>(); // linkedSignal automatically resets when initialName changes, while allowing local mutations readonly draftName = linkedSignal(() => this.initialName()); updateDraft(event: Event): void { this.draftName.set((event.target as HTMLInputElement).value); } } ``` ### Deferred Viewport Chunking: Naked @defer vs Stable Prefetched @defer #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: This naked @defer block triggers bundle downloads only when the viewport arrives, causing an abrupt layout shift and noticeable render delay since it lacks @placeholder, @loading, and prefetching. ```html  @defer (on viewport) { <app-heavy-chart [data]="chartData()" /> } ``` #### Production Standard (Correct) > **Standard**: Utilizes prefetch on idle to eliminate network fetch delays when scrolled into view, while placeholder and loading states enforce uniform container height (h-64) to eliminate CLS entirely. ```html  @defer (on viewport; prefetch on idle) { <app-heavy-chart [data]="chartData()" /> } @loading (minimum 250ms) { <div class="h-64 flex items-center justify-center bg-gray-50" aria-busy="true"> <app-spinner /> </div> } @placeholder (minimum 100ms) { <div class="h-64 w-full bg-gray-100 rounded-lg animate-pulse" aria-hidden="true"></div> } @error { <div class="h-64 flex items-center justify-center text-red-600"> <p>Failed to load chart module.</p> </div> } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Angular 19 Signal Primitives, linkedSignal Derivations, and Deferred Viewport Chunking

Angular 19 Signal Primitives, linkedSignal Derivations, and Deferred Viewport Chunking defines an industrial-grade behavioral standard for frontend engineering. Enforces modern Angular 19 standalone architecture using signal inputs, signal-based outputs, linkedSignal for resettable/derived state, and production-hardened @defer blocks. Prevents architectural anti-patterns such as writing to signals inside effects, using legacy decorator inputs, and defer blocks lacking layout stability constraints. 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 Signals in Effects for State Sync and Naked @defer Directives Causing Cumulative Layout Shift (CLS) 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 Signals in Effects for State Sync and Naked @defer Directives Causing Cumulative Layout Shift (CLS)	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()` and `input.required()` for component inputs, and `output()` for component event emitters.

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.