Angular 19 Signal Primitives, Linked Signals, and @defer Template Chunking

--- description: Angular 19 Signal Primitives, Linked Signals, and @defer Template Chunking - Enforces modern Angular 19 reactive architectures by requiring signal inputs and linkedSignal for derived mutable state, while prohibiting ngOnChanges and manual synchronizations. Mandates explicit @defer blocks with viewport triggers, minimum durations, and error/placeholder fallbacks for non-critical template subtrees to optimize bundle chunking and Core Web Vitals. globs: src/**/*.component.ts, src/**/*.component.html, src/**/*.ts alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/angular-19-signals-defer-views" --- # Angular 19 Signal Primitives, Linked Signals, and @defer Template Chunking > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mutating state via ngOnChanges/effects and omitting @defer blocks on below-the-fold dependencies. ## System Constraints You are a Principal Angular Architect enforcing Angular 19 standards. Strictly enforce Signal Inputs (`input()`, `input.required()`), `linkedSignal` for mutable state reset upon source signal changes, and `@defer` chunking with robust placeholders. Disallow legacy decorators (`@Input`, `@Output`, `@ViewChild`), `ngOnChanges` lifecycle hooks for state sync, and arbitrary side-effect mutations inside `effect()`. ## Strict Guidelines - Engineers MUST ALWAYS declare inputs using `input()` or `input.required()` instead of the legacy `@Input()` decorator. - Engineers MUST use `linkedSignal()` when local mutable state must reset or re-derive based on an upstream signal input, avoiding `ngOnChanges` or manual synchronization effects. - Engineers MUST NOT write to signals inside an `effect()` block; effects are strictly reserved for external non-Angular side effects (e.g., logging, Web APIs, DOM measurements). - Components MUST ALWAYS specify `changeDetection: ChangeDetectionStrategy.OnPush` and `standalone: true` (or rely on Angular 19 default standalone configuration). - Engineers MUST wrap all heavy, non-critical, or below-the-fold components in `@defer` blocks equipped with `on viewport` or `on idle` triggers, accompanied by `@placeholder`, `@loading`, and `@error` blocks. - Template `@loading` and `@placeholder` blocks SHOULD specify `minimum` display durations (e.g., `minimum 300ms`) to eliminate layout thrashing and visual flickering. ## Bad vs Good Implementations ### Migrating Legacy Input Sync & Static Components to LinkedSignal & @defer #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Uses legacy @Input decorators and ngOnChanges to imperatively synchronize mutable local draft state with incoming properties. Statically imports and renders HeavyAnalyticsChartComponent into the main bundle rather than code-splitting it via @defer, impacting LCP and initial bundle size. ```typescript import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; import { HeavyAnalyticsChartComponent } from './heavy-analytics-chart.component'; @Component({ selector: 'app-user-profile', standalone: true, imports: [HeavyAnalyticsChartComponent], template: ` <div> <h2>User: {{ selectedUser.name }}</h2> <input [(ngModel)]="draftEmail" /> <button (click)="save()">Save</button> <app-heavy-analytics-chart [data]="selectedUser.stats" /> </div> ` }) export class UserProfileComponent implements OnChanges { @Input({ required: true }) selectedUser!: { id: string; name: string; email: string; stats: any }; draftEmail: string = ''; ngOnChanges(changes: SimpleChanges): void { // Anti-pattern: Imperative state syncing via ngOnChanges causes race conditions if (changes['selectedUser']) { this.draftEmail = this.selectedUser.email; } } save(): void { // Imperative save } } ``` #### Production Standard (Correct) > **Standard**: Adopts signal inputs (`input.required()`) and Angular 19's `linkedSignal()`, cleanly establishing derived mutable draft state without manual `ngOnChanges` lifecycle hooks. Uses `@defer (on viewport)` to lazily load the analytics component chunk only when needed, protected by `@placeholder` and `@loading` minimum durations to prevent layout jitter. ```typescript import { Component, ChangeDetectionStrategy, input, linkedSignal } from '@angular/core'; import { HeavyAnalyticsChartComponent } from './heavy-analytics-chart.component'; interface User { id: string; name: string; email: string; stats: Record<string, number>; } @Component({ selector: 'app-user-profile', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeavyAnalyticsChartComponent], template: ` <div> <h2>User: {{ selectedUser().name }}</h2> <input [value]="draftEmail()" (input)="draftEmail.set($any($event.target).value)" /> <button (click)="save()">Save</button> @defer (on viewport; prefetch on idle) { <app-heavy-analytics-chart [data]="selectedUser().stats" /> } @placeholder (minimum 300ms) { <div class="skeleton-chart">Loading chart visual placeholder...</div> } @loading (minimum 200ms) { <div class="spinner">Fetching chart chunk...</div> } @error { <div class="error-banner">Failed to load analytics engine.</div> } </div> ` }) export class UserProfileComponent { readonly selectedUser = input.required<User>(); // Angular 19 linkedSignal creates derived, mutable state that auto-resets when selectedUser changes readonly draftEmail = linkedSignal({ source: this.selectedUser, computation: (user) => user.email, }); save(): void { const updatedEmail = this.draftEmail(); // Handle emission or persistence } } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Angular 19 Signal Primitives, Linked Signals, and @defer Template Chunking

Angular 19 Signal Primitives, Linked Signals, and @defer Template Chunking defines an industrial-grade behavioral standard for frontend engineering. Enforces modern Angular 19 reactive architectures by requiring signal inputs and linkedSignal for derived mutable state, while prohibiting ngOnChanges and manual synchronizations. Mandates explicit @defer blocks with viewport triggers, minimum durations, and error/placeholder fallbacks for non-critical template subtrees to optimize bundle chunking and Core Web Vitals. 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 state via ngOnChanges/effects and omitting @defer blocks on below-the-fold dependencies. 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 state via ngOnChanges/effects and omitting @defer blocks on below-the-fold dependencies.	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 declare inputs using `input()` or `input.required()` instead of the legacy `@Input()` decorator.

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.