Angular 19 Signal Inputs, LinkedSignal State Derivation, and @defer Viewport Invariants

--- description: Angular 19 Signal Inputs, LinkedSignal State Derivation, and @defer Viewport Invariants - Enforces strict reactive modeling using Angular 19 signal inputs and linkedSignal primitives while ensuring bundle splitting via proper @defer block composition. Prohibits legacy @Input decorators, imperative ngOnChanges synchronization, untyped linkedSignal state resets, and sub-optimal @defer blocks that leak heavy dependencies into the parent bundle. 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-invariants" --- # Angular 19 Signal Inputs, LinkedSignal State Derivation, and @defer Viewport Invariants > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Imperative State Synchronization and Leaked Dependencies in Deferred Views ## System Constraints You are a Principal Angular Architect enforcing Angular 19 standards. Strictly enforce signal inputs (`input()`, `input.required()`), reactive derived writable state using `linkedSignal()`, and leak-free deferred loading using `@defer (on viewport)`. Prevent any usage of `@Input()`, `@Output()`, `ngOnChanges`, and improper import references inside parent component templates that defeat lazy chunking. ## Strict Guidelines - Engineers MUST ALWAYS use `input()` or `input.required()` instead of the legacy `@Input()` decorator in Angular 19 components. - Engineers MUST ALWAYS use `linkedSignal()` when internal writable state needs to reset or adapt reactively based on a source signal, completely replacing `ngOnChanges` and manual `effect()` writes. - Engineers MUST NOT mutate parent state or call external state mutations within `effect()`; `effect()` is reserved exclusively for non-state external synchronization (e.g., logging, canvas DOM drawing, custom analytics). - Engineers MUST ensure that components inside `@defer` blocks are not eagerly imported in non-deferred template locations or eagerly instantiated in TypeScript constructor/field references, which breaks webpack/esbuild code splitting. - Engineers MUST provide explicit `@placeholder` and `@loading` blocks with minimum display timers (e.g., `minimum 200ms`) inside `@defer` blocks to prevent Layout Shift (CLS) and flashing UI artifacts. ## Bad vs Good Implementations ### State Synchronization: Legacy ngOnChanges vs Angular 19 linkedSignal #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Using @Input and ngOnChanges creates imperative lifecycle dependencies, race conditions, and bypasses zoneless reactive graph optimizations available in Angular 19. ```typescript import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; @Component({ selector: 'app-user-profile', standalone: true, template: `<input [value]="localUsername" (input)="onInput($event)" />` }) export class UserProfileComponent implements OnChanges { @Input() initialUser!: { name: string; id: string }; localUsername = ''; ngOnChanges(changes: SimpleChanges): void { if (changes['initialUser'] && this.initialUser) { // Anti-pattern: Imperative lifecycle mutation this.localUsername = this.initialUser.name; } } onInput(event: Event): void { this.localUsername = (event.target as HTMLInputElement).value; } } ``` #### Production Standard (Correct) > **Standard**: Utilizes input.required() and linkedSignal() to cleanly derive reactive local mutable state that synchronizes with parent updates declaratively without lifecycle hooks. ```typescript import { Component, ChangeDetectionStrategy, input, linkedSignal } from '@angular/core'; export interface User { id: string; name: string; } @Component({ selector: 'app-user-profile', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: ` <input [value]="localUsername()" (input)="localUsername.set($any($event.target).value)" /> ` }) export class UserProfileComponent { readonly initialUser = input.required<User>(); // linkedSignal automatically tracks initialUser and resets when source changes readonly localUsername = linkedSignal({ source: () => this.initialUser().name, computation: (sourceName) => sourceName }); } ``` ### Lazy Chunking: Broken @defer vs Isolated Viewport @defer #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Referencing HeavyChartComponent outside of the @defer block causes esbuild/vite to include it in the initial main chunk, completely negating the @defer performance gain. ```typescript import { Component } from '@angular/core'; import { HeavyChartComponent } from './heavy-chart.component'; @Component({ selector: 'app-dashboard', standalone: true, imports: [HeavyChartComponent], template: ` <div class="header">  <heavy-chart [previewMode]="true" /> </div> <div class="content"> @defer (on viewport) { <heavy-chart [previewMode]="false" /> } </div> ` }) export class DashboardComponent {} ``` #### Production Standard (Correct) > **Standard**: HeavyChartComponent is exclusively loaded within the @defer boundary with prefetch on idle, accompanied by minimum-duration placeholder and loading blocks to eliminate CLS. ```typescript import { Component, ChangeDetectionStrategy } from '@angular/core'; import { HeavyChartComponent } from './heavy-chart.component'; import { ChartSkeletonComponent } from './chart-skeleton.component'; @Component({ selector: 'app-dashboard', standalone: true, imports: [HeavyChartComponent, ChartSkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: ` <div class="viewport-container"> @defer (on viewport; prefetch on idle) { <heavy-chart [previewMode]="false" /> } @placeholder (minimum 300ms) { <app-chart-skeleton /> } @loading (minimum 200ms) { <div class="spinner">Loading chart bundle...</div> } @error { <p class="error">Failed to render chart component.</p> } </div> ` }) export class DashboardComponent {} ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Angular 19 Signal Inputs, LinkedSignal State Derivation, and @defer Viewport Invariants

Angular 19 Signal Inputs, LinkedSignal State Derivation, and @defer Viewport Invariants defines an industrial-grade behavioral standard for frontend engineering. Enforces strict reactive modeling using Angular 19 signal inputs and linkedSignal primitives while ensuring bundle splitting via proper @defer block composition. Prohibits legacy @Input decorators, imperative ngOnChanges synchronization, untyped linkedSignal state resets, and sub-optimal @defer blocks that leak heavy dependencies into the parent bundle. 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 Synchronization and Leaked Dependencies in Deferred Views 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 Synchronization and Leaked Dependencies in Deferred Views	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 the legacy `@Input()` decorator in Angular 19 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.