Angular + TypeScript Rules
Enterprise Angular with TypeScript, RxJS, and signals
# Role You are an expert Angular developer using TypeScript, standalone components, and signals. # Tech Stack - Angular 19+ - TypeScript (strict) - RxJS - Angular Signals - NgRx # Code Conventions - Use standalone components by default — avoid NgModules. - Use Angular Signals for reactive state management. - Use RxJS for async streams and HTTP calls via `HttpClient`. - Follow Angular style guide: feature folders, barrel exports. - Use reactive forms with strong typing via `FormGroup<T>`. - Use `inject()` function instead of constructor injection. - Use `@defer` blocks for lazy loading components. - Use Angular CLI for generating components, services, and pipes. - Write unit tests with Jasmine and Karma or Jest. # Code Style Preferences - Use TypeScript strict mode. Define types for all variables, parameters, and return values. - Never use the `any` type. Use `unknown` if the type is truly uncertain, then narrow it. - Use `const` by default. Only use `let` when reassignment is needed. Never use `var`. - Always handle errors explicitly. Use try/catch for async operations. Never silently swallow errors. - Use early returns (guard clauses) to reduce nesting and improve readability. - Use descriptive, meaningful names for variables, functions, and classes. Avoid abbreviations. - Keep functions small and focused. Each function should do one thing. Aim for under 50 lines. # What to Avoid - Do not use `any` type. - Do not use decorator-based injection — prefer `inject()`. - Do not subscribe to observables without unsubscribing. - Do not use `ngOnChanges` when signals can replace it. - Do not create god-components — keep them small.
About Angular + TypeScript AI Rules
AI coding rules files help your AI assistant (Cursor, Windsurf, Claude Code, GitHub Copilot, or Cline) understand your project's conventions, tech stack, and coding standards. This ensures the AI generates code that matches your team's style and follows best practices for Angular.
This preset is designed for Angular + TypeScript projects and includes rules for:
- Use standalone components by default — avoid NgModules.
- Use Angular Signals for reactive state management.
- Use RxJS for async streams and HTTP calls via `HttpClient`.
- Follow Angular style guide: feature folders, barrel exports.
- Use reactive forms with strong typing via `FormGroup<T>`.
Simply select your preferred AI IDE format above, then copy or download the generated rules file. Place it in your project's root directory and your AI assistant will automatically follow these conventions.
Get This Preset for a Specific IDE
Cursor
Angular + TypeScript rules for Cursor
Windsurf
Angular + TypeScript rules for Windsurf
Claude Code
Angular + TypeScript rules for Claude Code
GitHub Copilot
Angular + TypeScript rules for GitHub Copilot
Cline
Angular + TypeScript rules for Cline
Zed AI
Angular + TypeScript rules for Zed AI
Aider
Angular + TypeScript rules for Aider
Continue.dev
Angular + TypeScript rules for Continue.dev
Devin AI
Angular + TypeScript rules for Devin AI
Amazon Q
Angular + TypeScript rules for Amazon Q
Bolt.new
Angular + TypeScript rules for Bolt.new
Lovable
Angular + TypeScript rules for Lovable
Replit AI
Angular + TypeScript rules for Replit AI
Augment Code
Angular + TypeScript rules for Augment Code
JetBrains AI
Angular + TypeScript rules for JetBrains AI