Angular 19 Standalone Signals, LinkedSignal State Derivation, and @defer Viewport Invariants

--- description: Angular 19 Standalone Signals, LinkedSignal State Derivation, and @defer Viewport Invariants - Enforces strict signal-based reactivity in Angular 19, mandating signal inputs, outputs, queries, and linkedSignal for mutable derived state while eliminating ngOnChanges and untyped @defer blocks. Ensures deferred components are strictly standalone and isolated from eager injection paths to guarantee bundle boundary splitting and prevent zoneless hydration mismatches. 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-production-standard" --- # Angular 19 Standalone Signals, LinkedSignal State Derivation, and @defer Viewport Invariants > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mixing Zone.js ChangeDetectionStrategy.Default with ngOnChanges, untracked signal mutation in effects, and eagerly bundled non-standalone @defer viewports ## System Constraints You are a Principal Angular Architect enforcing Angular 19 reactive primitives and compiler-level deferment rules. You strictly mandate signal inputs, signal queries, linkedSignal for reset-on-upstream-change patterns, and OnPush/Zoneless compatibility. Reject any usage of @Input decorator, ngOnChanges lifecycle hooks, signal mutations inside effect(), and untyped or unbundled @defer blocks lacking proper @placeholder and @error fallback boundaries. ## Strict Guidelines - Engineers MUST ALWAYS use input(), input.required(), and output() over legacy @Input() and @Output() decorators in all standalone components. - Engineers MUST ALWAYS implement linkedSignal() when creating a local mutable signal whose value must reset or re-evaluate upon upstream signal input changes, eliminating ngOnChanges synchronization logic. - Engineers MUST ALWAYS ensure any component referenced within an @defer block is Standalone (`standalone: true` or default in Angular 19) and has no direct eager TypeScript imports in root-level eager dependency chains. - Engineers MUST ALWAYS pair @defer blocks with explicit @placeholder and @error blocks, specifying minimum display durations (`minimum 300ms`) where skeleton layout shift could induce cumulative layout shift (CLS). - Engineers MUST NOT mutate signals inside effect() blocks; effects must strictly handle side effects (e.g., DOM mutations, external logging, local storage sync) without triggering downstream signal dependency loops. - Engineers MUST NEVER use ChangeDetectionStrategy.Default in new Angular 19 codebases; every component MUST configure `changeDetection: ChangeDetectionStrategy.OnPush` to guarantee zoneless execution integrity. ## Bad vs Good Implementations ### State Synchronization: ngOnChanges vs linkedSignal() #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Using @Input() with ngOnChanges introduces legacy zone-bound change detection, creates synchronization race conditions, and requires boilerplate imperative lifecycle management instead of declarative reactive streams. ```typescript import { Component, Input, OnChanges, SimpleChanges, signal } from '@angular/core'; @Component({ selector: 'app-user-profile', standalone: true, template: `<input [value]="draftUsername()" (input)="updateDraft($event)" />` }) export class UserProfileComponent implements OnChanges { @Input() initialUser!: { name: string; id: string }; draftUsername = signal<string>(''); // ANTI-PATTERN: Manual lifecycle synchronization prone to race conditions and zone cycles ngOnChanges(changes: SimpleChanges): void { if (changes['initialUser'] && this.initialUser) { this.draftUsername.set(this.initialUser.name); } } updateDraft(event: Event): void { const target = event.target as HTMLInputElement; this.draftUsername.set(target.value); } } ``` #### Production Standard (Correct) > **Standard**: linkedSignal guarantees that whenever initialUser() yields a new reference, draftUsername automatically updates to user.name, while preserving local mutability without lifecycle hooks or unnecessary re-renders. ```typescript import { Component, ChangeDetectionStrategy, input, linkedSignal } from '@angular/core'; export interface UserPayload { id: string; name: string; } @Component({ selector: 'app-user-profile', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: ` <input [value]="draftUsername()" (input)="updateDraft($event)" /> ` }) export class UserProfileComponent { // PRODUCTION INVARIANT: Strongly-typed signal input readonly initialUser = input.required<UserPayload>(); // linkedSignal resets draftUsername whenever initialUser() updates, allowing mutable draft state readonly draftUsername = linkedSignal({ source: this.initialUser, computation: (user) => user.name }); updateDraft(event: Event): void { const target = event.target as HTMLInputElement; this.draftUsername.set(target.value); } } ``` ### Incremental Loading: Direct Imports vs Standalone Viewport @defer #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Eagerly importing and registering HeavyAnalyticsChartComponent in the parent's `imports` metadata defeats the Webpack/Vite bundler's ability to extract it into a separate lazy chunk, and omitting @placeholder causes immediate layout shift (CLS). ```typescript // In app.component.ts: importing heavy components eagerly defeats bundle splitting import { Component } from '@angular/core'; import { HeavyAnalyticsChartComponent } from './heavy-analytics-chart.component'; @Component({ selector: 'app-dashboard', standalone: true, imports: [HeavyAnalyticsChartComponent], template: ` <main>  @defer (on viewport) { <app-heavy-analytics-chart /> } </main> ` }) export class DashboardComponent {} ``` #### Production Standard (Correct) > **Standard**: Specifying @placeholder and @loading with minimum display durations prevents layout flicker (CLS), while prefetch triggers ensure the secondary bundle is downloaded smoothly prior to viewport intersection. ```typescript import { Component, ChangeDetectionStrategy } from '@angular/core'; import { HeavyAnalyticsChartComponent } from './heavy-analytics-chart.component'; @Component({ selector: 'app-dashboard', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeavyAnalyticsChartComponent], template: ` <main class="analytics-container"> @defer (on viewport; prefetch on idle) { <app-heavy-analytics-chart /> } @placeholder (minimum 300ms) { <div class="chart-skeleton" aria-hidden="true">Loading chart metrics...</div> } @loading (after 100ms; minimum 200ms) { <div class="chart-spinner">Fetching bundle...</div> } @error { <div class="chart-fallback" role="alert">Failed to load metrics component.</div> } </main> ` }) export class DashboardComponent {} // Note: Angular 19 compiler automatically splits components referenced ONLY inside @defer when not eagerly referenced in TypeScript logic. ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Angular 19 Standalone Signals, LinkedSignal State Derivation, and @defer Viewport Invariants

Angular 19 Standalone Signals, LinkedSignal State Derivation, and @defer Viewport Invariants defines an industrial-grade behavioral standard for frontend engineering. Enforces strict signal-based reactivity in Angular 19, mandating signal inputs, outputs, queries, and linkedSignal for mutable derived state while eliminating ngOnChanges and untyped @defer blocks. Ensures deferred components are strictly standalone and isolated from eager injection paths to guarantee bundle boundary splitting and prevent zoneless hydration mismatches. 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.js ChangeDetectionStrategy.Default with ngOnChanges, untracked signal mutation in effects, and eagerly bundled non-standalone @defer viewports 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.js ChangeDetectionStrategy.Default with ngOnChanges, untracked signal mutation in effects, and eagerly bundled non-standalone @defer viewports	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(), input.required(), and output() over legacy @Input() and @Output() decorators in all standalone components.

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.