Angular 19 Standalone Signals, LinkedSignals, and Defer Block Invariants

--- description: Angular 19 Standalone Signals, LinkedSignals, and Defer Block Invariants - Enforces Modern Angular 19 architectural standards by mandating signal inputs and linkedSignal for reactive derived mutable state, eliminating decorator-based inputs and manual synchronization side-effects in ngOnChanges or effects. Enforces strictly structured @defer blocks with minimum placeholder constraints to guarantee performance chunking and prevent cumulative layout shifts (CLS). 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-views-standard" --- # Angular 19 Standalone Signals, LinkedSignals, and Defer Block Invariants > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mutating internal signal state via ngOnChanges/effects and unconstrained @defer block usage causing layout shift ## System Constraints You are a Principal Software Architect enforcing Angular 19 reactive primitives and progressive hydration standards. You must reject legacy decorators (@Input, @Output, @ViewChild), prohibit signal synchronization inside lifecycle hooks or effects, mandate linkedSignal for mutable state derived from inputs, and ensure all @defer blocks feature explicit triggers (viewport/idle) and minimum placeholder durations to eliminate layout shifts. ## Strict Guidelines - Engineers MUST ALWAYS use signal inputs (`input()` or `input.required()`) instead of legacy `@Input()` decorators. - Engineers MUST use `linkedSignal()` when maintaining mutable local state that must automatically recompute or reset upon source input signal changes, avoiding `ngOnChanges` or `effect()` mutation chains. - Engineers MUST NOT call `.set()` or `.update()` on standard signals inside `effect()` to mirror input changes; use `linkedSignal` instead. - Engineers MUST ALWAYS provide both a `@placeholder` block with an explicit `minimum` duration (e.g., `minimum 500ms`) and a `@loading` block when implementing `@defer`. - Engineers MUST pair viewport rendering triggers (`on viewport`) with background idle prefetching (`prefetch on idle`) within `@defer` specifications to eliminate interaction latency. - Components loaded via `@defer` MUST be standalone and MUST NOT be eagerly referenced in static template conditions or imperative constructors in the host component. ## Bad vs Good Implementations ### State Synchronization & Viewport Chunking in Angular 19 #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Uses legacy @Input decorators, manual synchronization in ngOnChanges, and an effect() that imperatively writes to another signal (risking circular updates and performance degradation). In the template, @defer lacks a @placeholder block and prefetching, causing Cumulative Layout Shift (CLS) when the user interacts. ```typescript import { Component, Input, OnChanges, SimpleChanges, signal, effect } from '@angular/core'; import { HeavyAnalyticsChartComponent } from './heavy-analytics-chart.component'; @Component({ selector: 'app-user-profile', standalone: true, imports: [HeavyAnalyticsChartComponent], template: ` <div class="profile-container"> <h2>User: {{ currentUsername() }}</h2>  @defer (on interaction) { <app-heavy-analytics-chart [points]="chartData()" /> } </div> ` }) export class UserProfileComponent implements OnChanges { @Input({ required: true }) userId!: string; @Input() initialScore = 0; currentUsername = signal<string>(''); chartData = signal<number[]>([]); // Anti-pattern: Manual synchronization in ngOnChanges and effect side-effects ngOnChanges(changes: SimpleChanges): void { if (changes['initialScore']) { this.chartData.set([this.initialScore, this.initialScore * 2]); } } constructor() { effect(() => { // Anti-pattern: Writing to signals inside effect to mirror inputs this.currentUsername.set(`user_${this.userId}`); }); } } ``` #### Production Standard (Correct) > **Standard**: Adheres to Angular 19 best practices: Uses input.required() and input(), replaces imperative synchronization with linkedSignal() to guarantee safe local mutation linked directly to input state lifecycle, and configures @defer with prefetch on idle and explicit minimum placeholder times to eliminate layout shift. ```typescript import { Component, ChangeDetectionStrategy, input, linkedSignal } from '@angular/core'; import { HeavyAnalyticsChartComponent } from './heavy-analytics-chart.component'; import { SkeletonLoaderComponent } from './skeleton-loader.component'; @Component({ selector: 'app-user-profile', standalone: true, imports: [HeavyAnalyticsChartComponent, SkeletonLoaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: ` <div class="profile-container"> <h2>User: {{ username() }}</h2>  @defer (on viewport; prefetch on idle) { <app-heavy-analytics-chart [points]="chartData()" /> } @placeholder (minimum 300ms) { <app-skeleton-loader class="chart-skeleton" /> } @loading (minimum 200ms) { <div class="chart-spinner" aria-busy="true">Loading chart...</div> } @error { <p class="error-banner">Failed to load analytics module.</p> } </div> ` }) export class UserProfileComponent { // Invariant: Signal inputs readonly userId = input.required<string>(); readonly initialScore = input<number>(0); // Invariant: Pure derived state readonly username = computed(() => `user_${this.userId()}`); // Invariant: linkedSignal automatically resets/recomputes when input changes while remaining locally mutable readonly chartData = linkedSignal<number, number[]>({ source: () => this.initialScore(), computation: (score) => [score, score * 2] }); public updateScoreManually(customScore: number): void { this.chartData.set([customScore, customScore * 3]); } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Angular 19 Standalone Signals, LinkedSignals, and Defer Block Invariants

Angular 19 Standalone Signals, LinkedSignals, and Defer Block Invariants defines an industrial-grade behavioral standard for frontend engineering. Enforces Modern Angular 19 architectural standards by mandating signal inputs and linkedSignal for reactive derived mutable state, eliminating decorator-based inputs and manual synchronization side-effects in ngOnChanges or effects. Enforces strictly structured @defer blocks with minimum placeholder constraints to guarantee performance chunking and prevent cumulative layout shifts (CLS). 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 internal signal state via ngOnChanges/effects and unconstrained @defer block usage causing layout shift 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 internal signal state via ngOnChanges/effects and unconstrained @defer block usage causing layout shift	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 signal inputs (`input()` or `input.required()`) instead of legacy `@Input()` decorators.

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.