angular skill

Overview

This skill provides comprehensive, practical guidance for building applications with the Angular framework, covering components, modules, services, dependency injection, routing, forms, and TypeScript integration. It focuses on actionable patterns, code structure, and common pitfalls to help you design maintainable, testable Angular apps. Use it to get step-by-step instructions, code snippets, and architecture advice tailored to real development scenarios.

How this skill works

The skill inspects your Angular goals and current project context to recommend concrete steps: creating components, structuring modules, registering providers, configuring routes, and implementing reactive or template-driven forms. It explains TypeScript typings and Angular CLI commands, suggests folder layouts, and provides examples for lifecycle hooks, change detection strategies, and unit testing. When you supply code or error messages, it offers targeted fixes and best-practice refactors.

When to use it

• Starting a new Angular application or scaffold with Angular CLI
• Designing component and module structure for scalability
• Implementing dependency injection, services, and state management
• Configuring routing, lazy loading, and route guards
• Building forms (reactive or template-driven) and validation
• Debugging runtime errors, change detection issues, or TypeScript type problems

Best practices

• Prefer small, single-responsibility components and feature modules for separation of concerns
• Use Angular CLI for consistent scaffolding and build configuration
• Favor Reactive Forms when building complex form logic and validation
• Register services at the appropriate injector level to control scope and lifecycle
• Implement OnPush change detection for performance-critical components
• Write unit tests for components and services using TestBed and mocking for external dependencies

Example use cases

• Create a user-management feature with lazy-loaded module, route guards, and shared service for API calls
• Migrate a form-heavy page from template-driven to reactive forms to centralize validation and state
• Optimize a dashboard by applying OnPush and breaking large components into presentational and container components
• Resolve injector errors by explaining hierarchical injectors and correcting provider registration
• Integrate TypeScript interfaces for API responses and add strict typing to reduce runtime errors

FAQ