check-architecture

Angular Architecture Review

Analyze the Angular project architecture and provide recommendations for improvement.

What This Command Does

1. Structure Analysis

   • Folder organization
   • Feature modularity
   • Dependency flow
   • Layer separation

2. Pattern Verification

   • Smart/Dumb components
   • Service patterns
   • State management
   • Routing structure

3. Generated Report

   • Architecture score
   • Violations found
   • Improvement recommendations

Architecture Standards

1. Folder Structure

✅ Expected Structure:
src/app/
├── core/                    # Singleton services, guards, interceptors
│   ├── services/
│   ├── guards/
│   ├── interceptors/
│   └── models/
├── shared/                  # Reusable components, pipes, directives
│   ├── components/
│   ├── pipes/
│   ├── directives/
│   └── validators/
├── features/                # Business features
│   └── {feature}/
│       ├── components/
│       ├── services/
│       ├── store/
│       └── {feature}.routes.ts
├── layout/                  # Layout components
│   ├── header/
│   ├── sidebar/
│   └── shell/
├── app.config.ts
├── app.component.ts
└── app.routes.ts

2. Dependency Rules

✅ Allowed Dependencies:
- features → core, shared
- shared → core (types only)
- core → (external only)

❌ Forbidden Dependencies:
- core → features
- core → shared (components)
- shared → features
- features → features (cross-feature)

3. Smart/Dumb Pattern

// ✅ Container (Smart) Component
// - Injects services
// - Manages state
// - Handles side effects
@Component({
  selector: 'app-user-list-container',
  template: `
    <app-user-list
      [users]="users()"
      [loading]="loading()"
      (userSelected)="onSelect($event)"
    />
  `
})
export class UserListContainerComponent {
  private usersService = inject(UsersService);
  users = this.usersService.users;
  loading = this.usersService.loading;
}

// ✅ Presenter (Dumb) Component
// - Only @Input/@Output
// - No service injection
// - Pure display logic
@Component({
  selector: 'app-user-list',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserListComponent {
  @Input({ required: true }) users!: User[];
  @Input() loading = false;
  @Output() userSelected = new EventEmitter<string>();
}