no-canmatch-class

Restrict the usage of CanMatch which was the way to declare a legacy class-based guard.

Use CanMatchFn with a functional guard instead.

Documentation

• Route guards guide

Configuration

• in the recommended preset
• in the functional preset
• or just this rule:

{
  rules: {
    'eslint-plugin-angular-modern/no-canmatch-class': 'error'
  }
}

❌ Invalid

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanMatch {
  canMatch(): boolean {
    return true;
  }
}

✅ Valid

export const authGuard: CanMatchFn = () => {
  return true;
};

Back to README