LogWhispererAI/.opencode/skills/references/angular.md

Modern Angular Architecture

Status: Definitive Guide Stack: Angular 17+

🏗 Architecture: Standalone & Zone-less

1. Standalone Components

• Ban: NgModule (unless for legacy libs).
• Enforce: standalone: true in all components, directives, and pipes.
• Why: Tree-shaking, easier testing, simplified learning curve.

2. Signals (State Management)

• Signals over Observables: Use Signals for synchronous state. Use RxJS ONLY for complex asynchronous event streams (debounce, switchMap).
• Ban: Zone.js (eventually). Prepare for zoneless by using ChangeDetectionStrategy.OnPush everywhere.

// ✅ GOOD: Signal
@Component({ ... changeDetection: ChangeDetectionStrategy.OnPush })
export class Counter {
  count = signal(0);
  double = computed(() => this.count() * 2);

  increment() {
    this.count.update(c => c + 1);
  }
}

3. Control Flow Syntax

• Use: @if, @for, @switch.
• Ban: *ngIf, *ngFor (legacy structural directives).

⚡ Performance Patterns

1. Deferrable Views

• Use @defer to lazy load components without routing.
• Criteria: @defer (on viewport) for below-the-fold content.

2. Hydration

• Enable Client Hydration in app.config.ts.
• Avoid direct DOM manipulation which breaks hydration.

🧪 Testing

• Harnesses: Use Component Harnesses for robust tests.
• Signals: Test signals by verifying computed outputs.