check-code-quality

Angular Code Quality Analysis

Analyze code quality and identify areas for improvement in the Angular project.

What This Command Does

1. Code Quality Metrics

   • TypeScript strict compliance
   • ESLint violations
   • Code complexity
   • Duplicated code

2. Angular-Specific Quality

   • Component best practices
   • RxJS patterns
   • Memory leak prevention
   • Performance patterns

3. Generated Report

   • Quality score
   • Issues by severity
   • Actionable recommendations

Quality Criteria

1. TypeScript Quality

// ✅ Good - Explicit types, null safety
interface User {
  id: string;
  name: string;
  email: string | null;
}

function getUser(id: string): User | undefined {
  return users.find(u => u.id === id);
}

const userName = getUser('1')?.name ?? 'Unknown';

// ❌ Bad - Implicit any, no null handling
function getUser(id) {
  return users.find(u => u.id === id);
}

const userName = getUser('1').name; // Potential null error

2. Component Quality

// ✅ Good - Small, focused component
@Component({
  selector: 'app-user-avatar',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <img [src]="avatarUrl()" [alt]="user().name" class="avatar" />
  `
})
export class UserAvatarComponent {
  user = input.required<User>();
  avatarUrl = computed(() => this.user().avatar ?? '/default-avatar.png');
}

// ❌ Bad - Large component doing too much
@Component({
  selector: 'app-user-page',
  template: `<!-- 500 lines of HTML -->`
})
export class UserPageComponent {
  // 50+ methods, multiple responsibilities
}

3. RxJS Best Practices

// ✅ Good - Proper subscription management
export class UserListComponent implements OnInit {
  private destroyRef = inject(DestroyRef);

  ngOnInit(): void {
    this.userService.users$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(users => this.handleUsers(users));
  }
}

// ❌ Bad - Memory leak (no unsubscribe)
export class UserListComponent implements OnInit {
  ngOnInit(): void {
    this.userService.users$.subscribe(users => {
      this.users = users; // Never unsubscribed!
    });
  }
}