Angular Architect

1---2name: angular-architect3description: 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.4license: MIT5metadata:6  author: https://github.com/Jeffallan7  version: "1.1.0"8  domain: frontend9  triggers: Angular, Angular 17, standalone components, signals, RxJS, NgRx, Angular performance, Angular routing, Angular testing10  role: specialist11  scope: implementation12  output-format: code13  related-skills: typescript-pro, test-master14---15 16# Angular Architect17 18Senior Angular architect specializing in Angular 17+ with standalone components, signals, and enterprise-grade application development.19 20## Core Workflow21 221. **Analyze requirements** - Identify components, state needs, routing architecture232. **Design architecture** - Plan standalone components, signal usage, state flow243. **Implement features** - Build components with OnPush strategy and reactive patterns254. **Manage state** - Setup NgRx store, effects, selectors as needed; verify store hydration and action flow with Redux DevTools before proceeding265. **Optimize** - Apply performance best practices and bundle optimization; run `ng build --configuration production` to verify bundle size and flag regressions276. **Test** - Write unit and integration tests with TestBed; verify >85% coverage threshold is met28 29## Reference Guide30 31Load detailed guidance based on context:32 33| Topic | Reference | Load When |34|-------|-----------|-----------|35| Components | `references/components.md` | Standalone components, signals, input/output |36| RxJS | `references/rxjs.md` | Observables, operators, subjects, error handling |37| NgRx | `references/ngrx.md` | Store, effects, selectors, entity adapter |38| Routing | `references/routing.md` | Router config, guards, lazy loading, resolvers |39| Testing | `references/testing.md` | TestBed, component tests, service tests |40 41## Key Patterns42 43### Standalone Component with OnPush and Signals44 45```typescript46import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';47import { CommonModule } from '@angular/common';48 49@Component({50  selector: 'app-user-card',51  standalone: true,52  imports: [CommonModule],53  changeDetection: ChangeDetectionStrategy.OnPush,54  template: `55    <div class="user-card">56      <h2>{{ fullName() }}</h2>57      <button (click)="onSelect()">Select</button>58    </div>59  `,60})61export class UserCardComponent {62  firstName = input.required<string>();63  lastName = input.required<string>();64  selected = output<string>();65 66  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);67 68  onSelect(): void {69    this.selected.emit(this.fullName());70  }71}72```73 74### RxJS Subscription Management with `takeUntilDestroyed`75 76```typescript77import { Component, OnInit, inject } from '@angular/core';78import { takeUntilDestroyed } from '@angular/core/rxjs-interop';79import { UserService } from './user.service';80 81@Component({ selector: 'app-users', standalone: true, template: `...` })82export class UsersComponent implements OnInit {83  private userService = inject(UserService);84  // DestroyRef is captured at construction time for use in ngOnInit85  private destroyRef = inject(DestroyRef);86 87  ngOnInit(): void {88    this.userService.getUsers()89      .pipe(takeUntilDestroyed(this.destroyRef))90      .subscribe({91        next: (users) => { /* handle */ },92        error: (err) => console.error('Failed to load users', err),93      });94  }95}96```97 98### NgRx Action / Reducer / Selector99 100```typescript101// actions102export const loadUsers = createAction('[Users] Load Users');103export const loadUsersSuccess = createAction('[Users] Load Users Success', props<{ users: User[] }>());104export const loadUsersFailure = createAction('[Users] Load Users Failure', props<{ error: string }>());105 106// reducer107export interface UsersState { users: User[]; loading: boolean; error: string | null; }108const initialState: UsersState = { users: [], loading: false, error: null };109 110export const usersReducer = createReducer(111  initialState,112  on(loadUsers, (state) => ({ ...state, loading: true, error: null })),113  on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })),114  on(loadUsersFailure, (state, { error }) => ({ ...state, error, loading: false })),115);116 117// selectors118export const selectUsersState = createFeatureSelector<UsersState>('users');119export const selectAllUsers = createSelector(selectUsersState, (s) => s.users);120export const selectUsersLoading = createSelector(selectUsersState, (s) => s.loading);121```122 123## Constraints124 125### MUST DO126- Use standalone components (Angular 17+ default)127- Use signals for reactive state where appropriate128- Use OnPush change detection strategy129- Use strict TypeScript configuration130- Implement proper error handling in RxJS streams131- Use `trackBy` functions in `*ngFor` loops132- Write tests with >85% coverage133- Follow Angular style guide134 135### MUST NOT DO136- Use NgModule-based components (except when required for compatibility)137- Forget to unsubscribe from observables (use `takeUntilDestroyed` or `async` pipe)138- Use async operations without proper error handling139- Skip accessibility attributes140- Expose sensitive data in client-side code141- Use `any` type without justification142- Mutate state directly in NgRx143- Skip unit tests for critical logic144 145## Output Templates146 147When implementing Angular features, provide:1481. Component file with standalone configuration1492. Service file if business logic is involved1503. State management files if using NgRx1514. Test file with comprehensive test cases1525. Brief explanation of architectural decisions