angular-architect（Angular 架构师）

Angular Architect

Purpose

Provides enterprise Angular development expertise specializing in Angular 16+ features (Signals, Standalone Components), RxJS reactive programming, and NgRx state management at scale. Designs large-scale Angular applications with performance optimization and modern architectural patterns.

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

Red Flags → Escalate to 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)

Goal: Manage feature state with less boilerplate than Redux.

Steps:

1. Define Store 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 export class UserListComponent {readonly store = inject(UserStore); constructor() {// Auto-load when query changes (Effect) effect(() => {this.store.loadUsers();});}}

Workflow 4: Zoneless Applications (Angular 18+)

Goal: Remove Zone.js for smaller bundles and better debugging.

Steps:

1. Bootstrap Config // 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.

1. 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")

What it looks like:

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

Why it fails:

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

Correct approach:

• SwitchMap: 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

What it looks like:

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

Why it fails:

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

Correct approach:

• Computed Signal / Getter: isAdmin = computed(() => this.user().roles.includes('ADMIN')); <div *ngIf="isAdmin()">

❌ Anti-Pattern 3: Shared Module Bloat

What it looks like:

• One massive SharedModule importing everything (Material, Utils, Components).

Why it fails:

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

Correct approach:

• Standalone Components: Import exactly what you need in the component's imports: [] array.

7. Quality Checklist

Architecture:

• Standalone: No NgModules for new features.
• Lazy Loading: All feature routes are lazy loaded (loadComponent).
• State: Local state uses Signals, Shared state uses Store.

Performance:

• Change Detection: OnPush enabled everywhere.
• Bundle: Initial bundle < 200KB.
• Defer: @defer used for heavy components below the fold.

Code Quality:

• 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

Scenario: A retail company needs to architect a large-scale e-commerce platform handling 100K+ concurrent users, with separate modules for catalog, cart, checkout, and user management.

Architecture Decisions:

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

Key Implementation Details:

• 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

Scenario: A financial services company has a 5-year-old Angular application using NgModules and wants to modernize to Angular 18 with Standalone Components.

Migration Strategy:

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

Migration Results:

• 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

Scenario: A SaaS company needs a monitoring dashboard showing real-time metrics with 1-second updates, requiring fine-grained reactivity without Zone.js overhead.

Implementation Approach:

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

Performance Results:

• 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