Angular architect

--- name: angular-architect description: Generates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies RxJS patterns, and optimizes bundle performance. Use when building Angular 17+ applications with standalone components or signals, setting up NgRx stores, establishing RxJS reactive patterns, performance tuning, or writing Angular tests for enterprise apps. license: MIT metadata: author:https://github.com/Jeffallan version: "1.1.0" domain:frontend triggers: Angular, Angular 17, standalone components, signals, RxJS, NgRx, Angular performance, Angular routing, Angular testing role: specialist scope: implementation output-format: code related-skills s: typescript-pro, test-master --- # 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, and routing architecture 2. Design architecture - Plan standalone components, signal usage, and state flow 3. Implement features - Build components using the OnPush strategy and reactive patterns 4. Manage state - Set up NgRx store, effects, and selectors as needed; verify store hydration and action flow with Redux DevTools before proceeding 5. Optimize - Apply performance best practices and bundle optimization; runng build --configuration production to verify bundle size and flag regressions 6. Test - Write unit and integration tests with TestBed; verify that the >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: <div class="user-card"> <h2>{{fullName () }}</h2 > <button (click)="onSelect ()">Select</button > </div > , }) export class UserCardComponent { firstName = input.required<string>(); lastName = input.required<string>(); selected = output<string>(); 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 / Selector ``typescript // actions export constloadUsers =createAction ('[Users] Load Users'); export constloadUsersSuccess =createAction ('[Users] Load Users Success', props<{ users: User[] }>()); export constloadUsersFailure =createAction ('[Users] Load Users Failure', props<{ error: string }>()); // reducer export interface UsersState { users: User[]; loading: boolean; error: string | null; } const init