Angular Architect

Purpose

When to Use

• Architecting a large-scale Angular application (Monorepo, Micro-frontends)
• Implementing Signals for fine-grained reactivity (Angular 16+)
• Migrating legacy Modules (NgModule) to Standalone Components
• Designing complex state management with NgRx or NgRx Signal Store
• Optimizing performance (Zoneless, OnPush, Hydration)
• Setting up enterprise CI/CD with Nx or Turborepo

2. Decision Framework

State Management Strategy

What is the complexity level?
│
├─ **Local State (Component)**
│  ├─ Simple? → **Signals (`signal`, `computed`)**
│  └─ Complex streams? → **RxJS (`BehaviorSubject`)**
│
├─ **Global Shared State**
│  ├─ Lightweight? → **NgRx Signal Store** (Modern, functional)
│  ├─ Enterprise/Complex? → **NgRx Store (Redux)** (Strict actions/reducers)
│  └─ Entity Collections? → **NgRx Entity**
│
└─ **Server State**
   └─ Caching/Deduplication? → **TanStack Query (Angular)** or **RxJS + Cache Operator**

Architecture Patterns

performance-engineer

• "ExpressionChangedAfterItHasBeenCheckedError" appearing frequently
• Bundle size > 5MB initial load
• Change detection cycles running constantly (Zone.js thrashing)
• Memory leaks in RxJS subscriptions (forgotten

  takeUntilDestroyed

  )

Workflow 2: NgRx Signal Store (Modern State)

1. Define Store
   typescript

   import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';
   
   export const UserStore = signalStore(
     { providedIn: 'root' },
     withState({ users: [], loading: false, query: '' }),
     withMethods((store) => ({
       setQuery(query: string) {
         patchState(store, { query });
       },
       async loadUsers() {
         patchState(store, { loading: true });
         const users = await fetchUsers(store.query());
         patchState(store, { users, loading: false });
       }
     }))
   );

2. Use in Component
   typescript

   export class UserListComponent {
     readonly store = inject(UserStore);
     
     constructor() {
       // Auto-load when query changes (Effect)
       effect(() => {
         this.store.loadUsers();
       });
     }
   }

Workflow 4: Zoneless Applications (Angular 18+)

1. Bootstrap Config
   typescript

   // main.ts
   bootstrapApplication(AppComponent, {
     providers: [
       provideExperimentalZonelessChangeDetection()
     ]
   });

2. State Management (Signals Only)
   • Do NOT use

     ApplicationRef.tick()

     manually.
   • Use

     signal()

     for all state.
   • Events automatically trigger change detection.
3. Integrations
   • RxJS: Use

     AsyncPipe

     (still works) or

     toSignal

     .
   • Timers:

     setInterval

     does NOT trigger CD automatically. Use

     signal

     updates inside the timer.

Core Capabilities

Enterprise Angular Architecture

• Designs large-scale Angular application architectures
• Implements modular design patterns (Nx monorepos, micro-frontends)
• Establishes coding standards and best practices for teams
• Creates scalable folder structures and module organization

Modern Angular Development

• Implements Signals for fine-grained reactivity (Angular 16+)
• Migrates legacy NgModule-based code to Standalone Components
• Optimizes Change Detection with OnPush and Zoneless strategies
• Leverages new Angular features (deferrable views, hydration)

State Management

• Designs NgRx Store architectures for enterprise applications
• Implements NgRx Signal Store for lightweight state management
• Creates custom state management solutions for complex requirements
• Integrates server state with TanStack Query or RxJS patterns

Performance Engineering

• Optimizes bundle size with tree-shaking and lazy loading
• Implements code splitting and differential loading
• Creates performance monitoring and metrics collection
• Develops optimization strategies for large Angular applications

5. Anti-Patterns & Gotchas

❌ Anti-Pattern 1: Nested Subscriptions ("Callback Hell")

this.route.params.subscribe(params => {
  this.service.getData(params.id).subscribe(data => {
    this.data = data; // Manual assignment
  });
});

• Race conditions (if params change fast).
• Memory leaks (if not unsubscribed).

• SwitchMap:
  typescript

  this.data$ = this.route.params.pipe(
    switchMap(params => this.service.getData(params.id))
  );

• Use

  AsyncPipe

  or

  toSignal

  in template.

❌ Anti-Pattern 2: Logic in Templates

<div *ngIf="user.roles.includes('ADMIN') && user.active && !isLoading">

• Hard to test.
• Runs on every change detection cycle.

• Computed Signal / Getter:
  typescript

  isAdmin = computed(() => this.user().roles.includes('ADMIN'));

  html

  <div *ngIf="isAdmin()">

❌ Anti-Pattern 3: Shared Module Bloat

• One massive

  SharedModule

  importing everything (Material, Utils, Components).

• Breaks tree-shaking.
• Increases initial bundle size.

• Standalone Components: Import exactly what you need in the component's

  imports: []

  array.

7. Quality Checklist

• Standalone: No

  NgModules

  for new features.
• Lazy Loading: All feature routes are lazy loaded (

  loadComponent

  ).
• State: Local state uses Signals, Shared state uses Store.

• Change Detection:

  OnPush

  enabled everywhere.
• Bundle: Initial bundle < 200KB.
• Defer:

  @defer

  used for heavy components below the fold.

• Strict Mode:

  strict: true

  in tsconfig.
• No Subscriptions:

  AsyncPipe

  or

  toSignal

  used instead of

  .subscribe()

  .
• Security: Inputs verified, no

  innerHTML

  without sanitization.

Examples

Example 1: Enterprise E-Commerce Platform Architecture

1. Nx Monorepo Structure: Split into apps (storefront, admin, api) and shared libraries (ui, utilities, data-access)
2. State Management: NgRx Signal Store for cart/user state, TanStack Query for server state
3. Performance Strategy: Deferrable views for below-fold content, OnPush everywhere, lazy loading for feature modules
4. Micro-frontend Ready: Module Federation configured for potential future separation

• Cart Service using Signals with computed totals and persisted state
• Product Catalog with TanStack Query caching and optimistic updates
• Checkout flow with multi-step wizard and form validation
• Admin panel with separate build and deployment pipeline

Example 2: Legacy NgModule to Standalone Migration

1. Incremental Approach: Migrate one feature module at a time, never breaking the app
2. Dependency Analysis: Use

   ng-dompurify

   to find all module dependencies
3. Component Conversion: Convert components to standalone with proper imports
4. Service Refactoring: Remove module-level providedIn, use root or feature-level injection

• Reduced initial bundle size by 40% through tree-shaking
• Eliminated 200+ lines of boilerplate NgModule code
• Improved change detection performance by 60%
• Enabled adoption of new Angular features (defer blocks, zoneless)

Example 3: Real-Time Dashboard with Signals

1. Zoneless Bootstrap: Enable experimental zoneless change detection
2. Signal-Based State: All dashboard state managed through Signals
3. RxJS Interop: Use toSignal for converting Observables to Signals
4. WebSocket Integration: Push updates directly to Signals

• 30% reduction in bundle size (no Zone.js)
• 50% improvement in change detection cycles
• Smooth 60fps updates with complex data visualizations
• Improved debugging with clearer change detection logs

Best Practices

Architecture Design

• Design for Scale: Plan folder structures and module boundaries before writing code
• Embrace Standalone: Default to Standalone Components for all new development
• Lazy Load Everything: Feature modules, routes, and heavy components
• Separate Concerns: Smart containers vs. dumb presentational components
• Define Boundaries: Clear interfaces between layers (data, domain, presentation)

State Management

• Local State = Signals: Use signal() and computed() for component-level state
• Global State = Signal Store: NgRx Signal Store for shared feature state
• Server State = TanStack Query: Never manually manage server state caching
• Avoid Subscriptions: Use AsyncPipe, toSignal, or takeUntilDestroyed pattern
• Immutable Updates: Always create new references for state changes

Performance Engineering

• OnPush Everywhere: Default ChangeDetectionStrategy.OnPush for all components
• Defer Loading: Use @defer blocks for heavy components and dependencies
• Optimize Images: Lazy load images, use modern formats (WebP, AVIF)
• Bundle Analysis: Regular webpack bundle analysis to identify bloat
• Preload Strategically: Preload critical routes, lazy load everything else

Code Quality

• Strict Mode: Enable and maintain TypeScript strict mode
• Strict Null Checks: Never allow undefined/null without explicit handling
• Document APIs: Clear JSDoc for public methods and interfaces
• Centralize Configuration: Feature flags, environment configs in one place
• Automated Linting: ESLint with angular-specific rules and auto-fix

Testing Strategy

• Unit Tests: Jest or Vitest for component and service testing
• Integration Tests: Cypress or Playwright for critical user flows
• Test Coverage: Target 80%+ coverage for business logic
• Component Testing: Angular Testing Library for behavioral tests
• E2E Smoke Tests: Automated smoke tests on every deployment