Skip to content

Review Angular Code

Review the Angular code at $ARGUMENTS for adherence to modern best practices and project conventions.

Steps

  1. Read the project's CLAUDE.md for project-specific conventions.
  2. Read all relevant files at the provided path (component, template, styles, tests, service, routes, NgRx state files).
  3. Evaluate each file against the checklist below.
  4. Report findings grouped by severity: errors, warnings, suggestions.

Review Checklist

Component Patterns

  • [ ] Uses standalone: true
  • [ ] Uses ChangeDetectionStrategy.OnPush
  • [ ] Uses input() / output() functions (not @Input() / @Output() decorators)
  • [ ] Uses computed() for derived state
  • [ ] Uses inject() for dependency injection (not constructor parameters)
  • [ ] Component has a single, clear responsibility
  • [ ] Page components manage state and delegate rendering to view components
  • [ ] View components are purely presentational (no service injection)

Template Patterns

  • [ ] Uses @if, @for, @switch (not *ngIf, *ngFor, [ngSwitch])
  • [ ] @for blocks include track expression
  • [ ] No arrow functions or complex expressions in templates
  • [ ] Uses class/style bindings (not ngClass/ngStyle)
  • [ ] Accessibility: semantic HTML, ARIA attributes where needed, keyboard navigable

State Management (Signals)

  • [ ] Signals used for component/service state
  • [ ] Private writable signals with public readonly selectors
  • [ ] set() or update() used to modify signals (not mutate())
  • [ ] No unnecessary RxJS where signals suffice

State Management (NgRx)

  • [ ] Actions use createActionGroup() with descriptive source names
  • [ ] Action events follow naming convention: verb + noun (e.g., Load Items, Load Items Success)
  • [ ] Reducers are pure functions with no side effects
  • [ ] Reducers use immutable state transitions (spread operator or EntityAdapter methods)
  • [ ] Selectors are memoized via createSelector()
  • [ ] Selectors exported as a named object (e.g., ItemsSelectors = { ... })
  • [ ] Effects use inject() for dependencies
  • [ ] Effects handle errors with catchError and dispatch failure actions
  • [ ] Effects use appropriate flattening operators (exhaustMap for loads, switchMap for searches, concatMap for writes)
  • [ ] API services are separate from effects (effects call API services, not HttpClient directly)
  • [ ] State is registered with provideState() and provideEffects() in configuration

Services

  • [ ] Uses providedIn: 'root' or scoped appropriately
  • [ ] Uses inject() function
  • [ ] Handles loading and error state
  • [ ] HTTP errors caught and surfaced

Routing

  • [ ] Feature routes lazy-loaded with loadComponent / loadChildren
  • [ ] Functional guards (not class-based)
  • [ ] Routes defined in dedicated *.routes.ts files

Forms

  • [ ] Uses reactive forms (not template-driven)
  • [ ] Validation defined with Validators
  • [ ] Error messages displayed for invalid controls

TypeScript

  • [ ] No any types (use unknown for ambiguous)
  • [ ] Interfaces for data models (not classes)
  • [ ] Strict typing enforced

Testing

  • [ ] Test file exists alongside source file
  • [ ] Component tests mock injected services
  • [ ] Service tests use HttpTestingController for HTTP
  • [ ] Tests cover success and error paths
  • [ ] Tests verify signal state transitions
  • [ ] NgRx reducers tested as pure functions
  • [ ] NgRx selectors tested with .projector()
  • [ ] NgRx effects tested with provideMockActions

Performance

  • [ ] No unnecessary re-renders (OnPush + signals)
  • [ ] Images use NgOptimizedImage
  • [ ] Large lists use @for with track
  • [ ] No subscriptions without cleanup (takeUntilDestroyed, DestroyRef)

Styling (Tailwind CSS projects)

  • [ ] Uses utility classes instead of custom CSS where appropriate
  • [ ] Consistent use of design system tokens (DaisyUI classes, theme colors)
  • [ ] No inline styles when utility classes are available
  • [ ] Responsive design uses Tailwind breakpoint prefixes

Nx Monorepo (if applicable)

  • [ ] Module boundary constraints respected (@nx/enforce-module-boundaries)
  • [ ] No direct imports from library internals (use barrel exports / public API)
  • [ ] Library scope tags assigned correctly
  • [ ] Feature libraries do not depend on other feature libraries (depend on shared/data-access only)
  • [ ] Component library has no external dependencies beyond Angular core

Output Format

markdown
## Review: [path]

### Errors (must fix)
- [file:line] Description of issue

### Warnings (should fix)
- [file:line] Description of issue

### Suggestions (consider)
- [file:line] Description of suggestion

### Summary
[1-2 sentences overall assessment]

Report only actual issues found. Do not list items that pass the checklist.

Copyright © MSG Systems Romania AI Labs