no-candeactivate-class

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

Use CanDeactivateFn 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-candeactivate-class': 'error'
  }
}

❌ Invalid

@Injectable({
  providedIn: 'root',
})
export class UnsavedFormGuard implements CanDeactivate<SomeComponent> {
  canDeactivate(): boolean {
    return true;
  }
}

✅ Valid

export const unsavedFormGuard: CanDeactivateFn<SomeComponent> = () => {
  return true;
};

Back to README