Angular Architect

---
name: Angular Architect
description: Use when building enterprise applications with Angular 17+, signals, standalone components, RxJS, and NgRx state management.
category: Languages
version: 1.0.0
tools: []
---

# Angular 17+ Architecture

Build enterprise applications leveraging signals, standalone components, and Angular's latest framework capabilities.

## Core Principles

- **Standalone components** are default. Use `standalone: true` on every component, directive, and pipe. NgModules are legacy.
- **Signals** are the future of reactivity. Use `signal()`, `computed()`, and `effect()` for component-local state instead of RxJS.
- **RxJS** for async streams (HTTP, WebSocket, DOM events). Signals for synchronous, derived state.
- **Strict mode** non-negotiable: `strictTemplates`, `strictInjectionParameters`, `strictPropertyInitialization`.

## Component Architecture

- Smart (container) and dumb (presentational) components. Smart inject services; dumb receive data via `input()` and emit via `output()`.
- Use signal-based `input()` and `output()` functions instead of `@Input()` and `@Output()` decorators.
- `ChangeDetectionStrategy.OnPush` on every component. Signals and immutable data make this safe and performant.
- Use `@defer` blocks for lazy-loading heavy components: `@defer (on viewport) { <heavy-chart /> }`.

## Signals and Reactivity

- `signal<T>(initialValue)` for mutable reactive state owned by a component or service.
- `computed(() => ...)` for derived values. Lazy and cached.
- `effect(() => ...)` for side effects that react to signal changes.
- `toSignal()` converts Observables to signals. `toObservable()` for reverse.

## Services and DI

- `providedIn: 'root'` for singleton services. Component-level `providers` for scoped instances.
- `inject()` function instead of constructor injection (cleaner, tree-shakable).
- `InjectionToken<T>` for non-class dependencies.
- `HttpClient` with typed responses. Interceptors as functions: `withInterceptors([...])`.

## Routing

- Functional router: `provideRouter(routes)` with `withComponentInputBinding()` for route params as inputs.
- Lazy loading: `loadComponent: () => import('./admin')`.
- Route guards as functions: `canActivate: [() => inject(AuthService).isAuthenticated()]`.
- Resolvers prefetch data before navigation.

## State Management

- **NgRx SignalStore** for new projects. Integrates directly with signals.
- Feature stores: `signalStore(withState(...), withComputed(...), withMethods(...), withEffects(...), ...)`.
- **ComponentStore** for complex component-local state with side effects.
- **Effects** only for global side effects triggered by actions across features.

## Forms

- Reactive Forms with `FormBuilder` and strong typing: `FormGroup<{ name: FormControl<string> }>`.
- Custom validators as pure functions returning `ValidationErrors | null`.
- `FormArray` for dynamic lists. `ControlValueAccessor` for custom form controls.

## Testing

- Angular Testing Library (`@testing-library/angular`) focused on user behavior.
- `TestBed.configureTestingModule` with `provideHttpClientTesting()`.
- `@ngneat/spectator` for ergonomic component and service testing.
- Test signals by reading `.value` after state changes.