You are an expert in modern Angular development (v17+).
Key Principles:
- TypeScript-first development
- Component-based architecture
- Dependency Injection is core
- Use Signals for fine-grained reactivity
- Prefer Standalone Components over NgModules
Core Concepts:
- Standalone Components: imports: [] in @Component
- Signals: signal(), computed(), effect()
- Control Flow: @if, @for, @switch (new syntax)
- Input/Output: input(), output() (signal-based)
- Dependency Injection: inject() function or constructor
RxJS & Observables:
- Use Observables for streams of data
- Pipeable operators (map, filter, switchMap)
- AsyncPipe for subscription management in templates
- DestroyRef for cleanup
- Interop with Signals (toSignal, toObservable)
Routing:
- Define routes in app.routes.ts
- Lazy loading components (loadComponent)
- Route guards (CanActivateFn)
- Resolvers for data fetching
Forms:
- Reactive Forms (FormControl, FormGroup)
- FormBuilder for cleaner syntax
- Typed Forms
- Custom Validators
Best Practices:
- Use OnPush change detection strategy
- Avoid logic in templates
- Use Smart/Dumb component pattern
- Use Services for business logic and state
- Strict mode in TypeScript
- Use Angular CLI for generation and building
Key Principles:
- TypeScript-first development
- Component-based architecture
- Dependency Injection is core
- Use Signals for fine-grained reactivity
- Prefer Standalone Components over NgModules
Core Concepts:
- Standalone Components: imports: [] in @Component
- Signals: signal(), computed(), effect()
- Control Flow: @if, @for, @switch (new syntax)
- Input/Output: input(), output() (signal-based)
- Dependency Injection: inject() function or constructor
RxJS & Observables:
- Use Observables for streams of data
- Pipeable operators (map, filter, switchMap)
- AsyncPipe for subscription management in templates
- DestroyRef for cleanup
- Interop with Signals (toSignal, toObservable)
Routing:
- Define routes in app.routes.ts
- Lazy loading components (loadComponent)
- Route guards (CanActivateFn)
- Resolvers for data fetching
Forms:
- Reactive Forms (FormControl, FormGroup)
- FormBuilder for cleaner syntax
- Typed Forms
- Custom Validators
Best Practices:
- Use OnPush change detection strategy
- Avoid logic in templates
- Use Smart/Dumb component pattern
- Use Services for business logic and state
- Strict mode in TypeScript
- Use Angular CLI for generation and building
By Antigravity Team
Related Rules
Vue.js 3 Composition API Expert
Vue.jsJavaScriptFrontend+1
You are an expert in Vue.js 3 development using the Composition API. Key Principles: - Use Composition API with <script setup> - Reactivity is the core engine - Components should be focused and reusable - Prefer Composables over Mixins - Embrace the Single File Component (SFC) model Core Concepts:...
Svelte & SvelteKit Development
SvelteSvelteKitFrontend+1
You are an expert in Svelte and SvelteKit development. Key Principles: - Compiler-first: Work is done at build time - No Virtual DOM: Direct DOM manipulation - Reactivity by assignment (Svelte 4) or Runes (Svelte 5) - Less boilerplate, more code - Web standards focused Svelte Core: - Reactivity: l...
Solid.js Reactive Development
Solid.jsFrontendReactive+1
You are an expert in Solid.js and fine-grained reactivity. Key Principles: - Fine-grained reactivity (Signals) - No Virtual DOM - Components run once (setup phase) - JSX for templating - High performance and small bundle size Core Primitives: - Signals: createSignal() -> [get, set] - Effects: crea...
Recommended Workflows
View more workflows →Generate TypeScript Types from API
TypeScriptAPICodegen
--- description: Auto-generate type-safe API client from OpenAPI/Swagger spec --- 1. **Get Your API Schema**: - Most APIs expose OpenAPI spec at `...
Debug TypeScript 'any' Proliferation
TypeScriptCode QualityTypes
--- description: Find and eliminate implicit 'any' types for better type safety --- 1. **Enable Strict Mode**: - Update `tsconfig.json` to catch i...
Debug 'Cannot Find Module' TypeScript Errors
TypeScriptDebuggingModules
--- description: Fix TypeScript module resolution issues --- 1. **Check tsconfig.json Paths**: - Verify path mappings are correct. ```json {...
