check-compliance

Angular Standards Compliance Check

Verify that the Angular project follows established coding standards and best practices.

What This Command Does

1. Standards Verification

   • Check coding conventions
   • Verify naming conventions
   • Validate file organization
   • Check import order
   • Verify documentation standards

2. Angular-Specific Checks

   • Standalone components usage
   • Signals implementation
   • OnPush change detection
   • Modern control flow (@if, @for)
   • Typed forms

3. Generated Report

   • Non-compliant files
   • Severity levels
   • Remediation recommendations
   • Compliance score (/100)

Compliance Areas

1. Component Standards

// ✅ Compliant
@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `...`
})
export class UserProfileComponent {}

// ❌ Non-compliant
@Component({
  selector: 'user-profile',     // Missing app- prefix
  // standalone: missing       // Not standalone
  // changeDetection: missing  // Not OnPush
})
export class UserProfile {}    // Missing Component suffix

2. Signal Usage

// ✅ Compliant - Using signals
export class CounterComponent {
  count = signal(0);
  doubleCount = computed(() => this.count() * 2);
}

// ❌ Non-compliant - Using observables for local state
export class CounterComponent {
  count$ = new BehaviorSubject(0);
}

3. Template Syntax

<!-- ✅ Compliant - Modern control flow -->
@if (loading()) {
  <app-spinner />
}

@for (item of items(); track item.id) {
  <app-item [data]="item" />
}

<!-- ❌ Non-compliant - Legacy syntax -->
<app-spinner *ngIf="loading"></app-spinner>
<app-item *ngFor="let item of items" [data]="item"></app-item>

4. Dependency Injection

// ✅ Compliant - inject() function
export class MyComponent {
  private readonly userService = inject(UserService);
}

// ⚠️ Warning - Constructor injection (valid but verbose)
export class MyComponent {
  constructor(private userService: UserService) {}
}