Angular 19 Standalone Signals, Linked Signals, and Defer View Invariants

--- description: Angular 19 Standalone Signals, Linked Signals, and Defer View Invariants - Enforces Modern Angular 19 reactivity and lazy-loading standards by mandating signal inputs, linkedSignal for resettable derivations, and strictly partitioned @defer blocks with minimum rendering thresholds. Prohibits legacy decorator inputs, manual ngOnChanges synchronization, and untracked side-effects in computed signals. globs: src/**/*.ts, src/**/*.html alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/angular-19-standalone-signals-defer-views" --- # Angular 19 Standalone Signals, Linked Signals, and Defer View Invariants > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mixing Legacy ngOnChanges with Signal Inputs and Unbounded @defer Blocks Without Viewport Placeholders ## System Constraints You are a Principal Angular Architect enforcing Angular 19 Standalone Component patterns, reactive Signal graphs, linkedSignal derivations, and @defer bundle optimization. Mandate ChangeDetectionStrategy.OnPush, immutable signal transformations, and complete placeholder-loading-error defer blocks. ## Strict Guidelines - Components MUST ALWAYS specify `changeDetection: ChangeDetectionStrategy.OnPush` and set `standalone: true` (or rely on Angular 19 standalone defaults). - Engineers MUST ALWAYS use `input()` and `input.required()` instead of the legacy `@Input()` decorator. - Engineers MUST use `linkedSignal()` when internal state must derive from an input signal but remain locally mutable/resettable, avoiding manual `ngOnChanges` or `effect()` state duplication. - Engineers MUST NOT write to any writable signals inside `computed()` expressions or invoke side effects inside computed callbacks. - All heavy downstream component chunks MUST be wrapped in `@defer (on viewport; prefetch on idle)` and MUST explicitly define `@placeholder(minimum 300ms)` and `@loading` blocks to prevent Layout Shift (CLS). - Engineers MUST use `output()` and `outputFromObservable()` instead of the legacy `@Output()` decorator with `EventEmitter`. ## Bad vs Good Implementations ### State Derivation: Legacy ngOnChanges vs Modern linkedSignal #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Uses legacy @Input decorators and ngOnChanges lifecycle hooks to manually synchronize state, which creates boilerplate and risks state drift in fine-grained reactive graphs. ```typescript import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; @Component({ selector: 'app-user-profile', template: `<input [(ngModel)]="selectedName" />` }) export class UserProfileComponent implements OnChanges { @Input() initialName = ''; selectedName = ''; ngOnChanges(changes: SimpleChanges): void { if (changes['initialName']) { this.selectedName = this.initialName; } } } ``` #### Production Standard (Correct) > **Standard**: Adopts input.required() and linkedSignal() to automatically reset internal mutable state whenever the upstream input updates, completely removing lifecycle boilerplate. ```typescript import { Component, ChangeDetectionStrategy, input, linkedSignal } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-user-profile', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `<input [ngModel]="selectedName()" (ngModelChange)="selectedName.set($event)" />` }) export class UserProfileComponent { readonly initialName = input.required<string>(); readonly selectedName = linkedSignal(() => this.initialName()); } ``` ### Chunk Optimization: Plain Render vs @defer with Viewport Trigger and Thresholds #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Forces heavy dependencies into the parent bundle, worsening initial bundle size, Total Blocking Time (TBT), and First Contentful Paint (FCP). ```typescript import { Component } from '@angular/core'; import { HeavyAnalyticsGraphComponent } from './heavy-analytics-graph.component'; @Component({ selector: 'app-dashboard', standalone: true, imports: [HeavyAnalyticsGraphComponent], template: ` <div class="container"> <app-heavy-analytics-graph [data]="graphData()" /> </div> ` }) export class DashboardComponent { // Heavy graph bundle is bundled into the main entry route unconditionally } ``` #### Production Standard (Correct) > **Standard**: Uses Angular @defer to split the heavy component into a separate lazy-chunk loaded on viewport entry, using @placeholder with minimum display times to avoid Cumulative Layout Shift (CLS). ```typescript import { Component, ChangeDetectionStrategy, signal } from '@angular/core'; import { HeavyAnalyticsGraphComponent } from './heavy-analytics-graph.component'; @Component({ selector: 'app-dashboard', standalone: true, imports: [HeavyAnalyticsGraphComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: ` <div class="container"> @defer (on viewport; prefetch on idle) { <app-heavy-analytics-graph [data]="graphData()" /> } @placeholder (minimum 300ms) { <div class="skeleton-loader" aria-busy="true">Loading visual analytics...</div> } @loading (after 100ms; minimum 500ms) { <div class="spinner">Rendering chart...</div> } @error { <p role="alert">Failed to load analytics engine.</p> } </div> ` }) export class DashboardComponent { readonly graphData = signal<number[]>([10, 20, 30]); } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Angular 19 Standalone Signals, Linked Signals, and Defer View Invariants

Angular 19 Standalone Signals, Linked Signals, and Defer View Invariants defines an industrial-grade behavioral standard for frontend engineering. Enforces Modern Angular 19 reactivity and lazy-loading standards by mandating signal inputs, linkedSignal for resettable derivations, and strictly partitioned @defer blocks with minimum rendering thresholds. Prohibits legacy decorator inputs, manual ngOnChanges synchronization, and untracked side-effects in computed signals. 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 Legacy ngOnChanges with Signal Inputs and Unbounded @defer Blocks Without Viewport Placeholders 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 Legacy ngOnChanges with Signal Inputs and Unbounded @defer Blocks Without Viewport Placeholders	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 ALWAYS specify `changeDetection

Components MUST ALWAYS specify `changeDetection: ChangeDetectionStrategy.OnPush` and set `standalone: true` (or rely on Angular 19 standalone defaults).

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.