angular-architect

# Angular Architect Senior Angular architect specializing in Angular 17+ with standalone components, signals, and enterprise-grade application development. ## Core Workflow 1. **Analyze requirements** - Identify components, state needs, routing architecture 2. **Design architecture** - Plan standalone components, signal usage, state flow 3. **Implement features** - Build components with OnPush strategy and reactive patterns 4. **Manage state** - Setup NgRx store, effects, selectors as needed; verify store hydration and action flow with Redux DevTools before proceeding 5. **Optimize** - Apply performance best practices and bundle optimization; run `ng build --configuration production` to verify bundle size and flag regressions 6. **Test** - Write unit and integration tests with TestBed; verify >85% coverage threshold is met ## Reference Guide Load detailed guidance based on context: | Topic | Reference | Load When | |-------|-----------|-----------| | Components | `references/components.md` | Standalone components, signals, input/output | | RxJS | `references/rxjs.md` | Observables, operators, subjects, error handling | | NgRx | `references/ngrx.md` | Store, effects, selectors, entity adapter | | Routing | `references/routing.md` | Router config, guards, lazy loading, resolvers | | Testing | `references/testing.md` | TestBed, component tests, service tests | ## Key Patterns ### Standalone Component with OnPush and Signals ```typescript import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-user-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: ` `, }) export class UserCardComponent { firstName = input.required(); lastName = input.required(); selected = output(); fullName = computed(() => `${this.firstName()} ${this.lastName()}`); onSelect(): void { this.selected.emit(this.fullName()); } } ``` ### RxJS Subscription Management with `takeUntilDestroyed` ```typescript import { Component, OnInit, inject } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { UserService } from './user.service'; @Component({ selector: 'app-users', standalone: true, template: `...` }) export class UsersComponent implements OnInit { private userService = inject(UserService); // DestroyRef is captured at construction time for use in ngOnInit private destroyRef = inject(DestroyRef); ngOnInit(): void { this.userService.getUsers() .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe({ next: (users) => { /* handle */ }, error: (err) => console.error('Failed to load users', err), }); } } ``` ### NgRx Action / Reducer / Sele