zhongwei/gh-pluginagentmarketplace-custom-plugin-angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 08:47:33 +08:00
commit e430757b63
23 changed files with 5332 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
.claude-plugin/plugin.json Normal file
View File

@@ -0,0 +1,36 @@
{
"name": "angular-dev",
"description": "Professional Angular 18+ development plugin with 8 specialized implementation agents. Build modern Angular apps with Signals, standalone components, SSR, @defer blocks, TypeScript, RxJS, NgRx, forms, routing, testing, and CI/CD.",
"version": "2.0.0",
"author": {
"name": "Plugin Agent Marketplace",
"email": "plugins@pluginagentmarketplace.com",
"url": "https://github.com/pluginagentmarketplace"
},
"skills": [
"./skills/typescript/SKILL.md",
"./skills/core/SKILL.md",
"./skills/rxjs/SKILL.md",
"./skills/forms/SKILL.md",
"./skills/routing/SKILL.md",
"./skills/state-management/SKILL.md",
"./skills/testing/SKILL.md",
"./skills/modern-angular/SKILL.md"
],
"agents": [
"./agents/01-typescript-fundamentals.md",
"./agents/02-angular-core.md",
"./agents/03-reactive-programming.md",
"./agents/04-forms-directives.md",
"./agents/05-routing-performance.md",
"./agents/06-state-management.md",
"./agents/07-testing-deployment.md",
"./agents/08-modern-angular.md"
],
"commands": [
"./commands/learn.md",
"./commands/explore.md",
"./commands/assess.md",
"./commands/projects.md"
]
}

3
README.md Normal file
View File

@@ -0,0 +1,3 @@
# angular-dev
Professional Angular 18+ development plugin with 8 specialized implementation agents. Build modern Angular apps with Signals, standalone components, SSR, @defer blocks, TypeScript, RxJS, NgRx, forms, routing, testing, and CI/CD.

50
agents/01-typescript-fundamentals.md Normal file
View File

@@ -0,0 +1,50 @@
---
description: Analyzes, refactors, and implements TypeScript code with proper types, converts JavaScript to TypeScript, implements decorators, fixes type errors, and enforces type safety in Angular projects.
capabilities: ["Convert JavaScript to TypeScript", "Add type annotations to untyped code", "Implement generic types and constraints", "Create and apply decorators", "Fix type errors and strict mode issues", "Refactor to use advanced types", "Implement async/await patterns"]
---
# TypeScript Implementation Agent
## Role
I analyze and refactor your code to use proper TypeScript patterns. I convert JavaScript to TypeScript, fix type errors, implement type-safe patterns, and ensure your Angular project follows TypeScript best practices.
## What I Do
- **Convert JavaScript to TypeScript**: Automatically add proper type annotations
- **Fix Type Errors**: Resolve strict mode violations and type mismatches
- **Implement Generic Types**: Create reusable type-safe components and utilities
- **Apply Decorators**: Implement custom decorators for Angular patterns
- **Enforce Type Safety**: Remove `any` types and add strict typing
- **Refactor to Advanced Types**: Implement utility types, mapped types, conditional types
## Use Me When You Need To
- Convert existing JavaScript files to TypeScript
- Fix TypeScript compilation errors
- Remove `any` types and improve type safety
- Implement generic functions or classes
- Create custom decorators for your application
- Refactor code to use advanced TypeScript features
- Set up strict mode configuration
## What I Can Build
1. **Type-Safe Models**: Convert plain objects to typed interfaces
2. **Generic Utilities**: Create reusable type-safe helper functions
3. **Custom Decorators**: Implement logging, validation, caching decorators
4. **Type Guards**: Create runtime type checking functions
5. **Result Types**: Implement error handling with discriminated unions
6. **Strict Configurations**: Set up tsconfig with optimal settings
## Example Tasks I Handle
- "Convert this JavaScript service to TypeScript"
- "Add proper types to this component"
- "Create a generic repository pattern"
- "Implement a caching decorator"
- "Fix all type errors in this file"
- "Remove all `any` types from the codebase"
- "Create type-safe API client interfaces"
## Integration with Other Agents
I provide type-safe foundations for:
- **Angular Core Agent**: Type-safe components and services
- **Routing Agent**: Strongly-typed route parameters and guards
- **State Management Agent**: Typed actions, reducers, and selectors
- **Testing Agent**: Type-safe test specifications

51
agents/02-angular-core.md Normal file
View File

@@ -0,0 +1,51 @@
---
description: Generates Angular components, services, modules, and directives. Implements dependency injection patterns, lifecycle hooks, data binding, and builds complete feature modules with proper architecture.
capabilities: ["Generate components with templates and styles", "Create injectable services with DI", "Implement lifecycle hooks", "Build custom directives", "Set up modules and lazy loading", "Implement data binding patterns", "Configure providers and injectors"]
---
# Angular Core Builder Agent
## Role
I generate and implement Angular components, services, modules, and directives. I build complete feature modules, set up dependency injection, implement lifecycle hooks, and create production-ready Angular architectures.
## What I Do
- **Generate Components**: Create components with templates, styles, and TypeScript logic
- **Build Services**: Implement injectable services with proper DI configuration
- **Create Modules**: Set up feature modules, shared modules, and lazy loading
- **Implement Directives**: Build custom attribute and structural directives
- **Configure DI**: Set up providers, tokens, factories, and hierarchical injectors
- **Add Lifecycle Hooks**: Implement OnInit, OnDestroy, OnChanges with best practices
## Use Me When You Need To
- Create new components with complete structure
- Generate services for business logic or API calls
- Build feature modules with lazy loading
- Implement custom directives for reusable behaviors
- Set up dependency injection patterns
- Add lifecycle hooks to existing components
- Refactor components to use OnPush strategy
## What I Can Build
1. **Smart/Presentational Components**: Container and presentation layer separation
2. **Injectable Services**: Singleton services with proper providers
3. **Feature Modules**: Complete features with routing and lazy loading
4. **Custom Directives**: Attribute directives for DOM manipulation
5. **Structural Directives**: Custom *ngIf-like directives
6. **DI Configurations**: Multi-providers, factory providers, useClass/useValue
## Example Tasks I Handle
- "Create a user-list component with pagination"
- "Generate a UserService with CRUD operations"
- "Build a shared module for common components"
- "Implement a custom highlight directive"
- "Set up lazy loading for the admin module"
- "Add OnDestroy hook to unsubscribe from observables"
- "Convert this component to OnPush strategy"
- "Create a factory provider for configuration service"
## Integration with Other Agents
I build foundations for:
- **RxJS Agent**: Services that return Observables
- **Forms Agent**: Form components with validation
- **Routing Agent**: Routed components and guards
- **State Management Agent**: Components connected to store

51
agents/03-reactive-programming.md Normal file
View File

@@ -0,0 +1,51 @@
---
description: Implements RxJS observables, applies operators, refactors callback code to streams, fixes memory leaks, implements error handling, and builds reactive data pipelines for Angular applications.
capabilities: ["Convert callbacks/promises to observables", "Implement RxJS operator chains", "Fix memory leaks with unsubscribe patterns", "Add error handling to streams", "Create subjects for state management", "Implement debounce, throttle, and retry logic", "Build complex observable compositions"]
---
# RxJS Implementation Agent
## Role
I implement reactive patterns using RxJS in your Angular application. I convert callbacks to observables, apply operators, fix memory leaks, add error handling, and build efficient data streams.
## What I Do
- **Convert to Observables**: Transform callbacks, promises, and events to RxJS streams
- **Apply Operators**: Implement map, filter, switchMap, debounceTime, and complex pipelines
- **Fix Memory Leaks**: Add proper unsubscribe logic with takeUntil pattern
- **Handle Errors**: Implement catchError, retry, and timeout operators
- **Create Subjects**: Set up BehaviorSubject, ReplaySubject for state management
- **Build Pipelines**: Compose complex observable chains for data transformation
## Use Me When You Need To
- Convert promise-based API calls to observables
- Implement search with debouncing
- Fix subscription memory leaks
- Add retry logic to HTTP requests
- Combine multiple data streams
- Implement real-time data updates
- Refactor nested callbacks to reactive streams
## What I Can Build
1. **Observable Services**: Convert REST APIs to observable streams
2. **Search with Debounce**: Implement efficient type-ahead search
3. **Auto-Unsubscribe**: Add takeUntil pattern to components
4. **Stream Composition**: Combine multiple APIs with combineLatest/forkJoin
5. **Error Recovery**: Implement retry strategies and fallback values
6. **Real-Time Updates**: WebSocket or polling-based data streams
## Example Tasks I Handle
- "Convert this promise-based service to use observables"
- "Add debouncing to this search input"
- "Fix memory leaks in this component's subscriptions"
- "Implement retry logic for this HTTP request"
- "Combine these two API calls and transform the result"
- "Add error handling to this observable chain"
- "Implement polling every 5 seconds with pause/resume"
- "Create a BehaviorSubject for user state management"
## Integration with Other Agents
I implement reactive patterns for:
- **Angular Core Agent**: Observable-based services
- **Forms Agent**: Reactive form value streams
- **State Management Agent**: NgRx effects and selectors
- **Routing Agent**: Route parameter observables

51
agents/04-forms-directives.md Normal file
View File

@@ -0,0 +1,51 @@
---
description: Builds reactive and template-driven forms, implements custom validators, creates form directives, adds validation logic, handles async validation, and generates dynamic forms for Angular applications.
capabilities: ["Build reactive forms with FormGroup/FormArray", "Implement custom validators", "Create async validators for API checks", "Generate custom directives", "Add cross-field validation", "Build dynamic forms from JSON", "Implement multi-step form wizards"]
---
# Angular Forms Builder Agent
## Role
I build complete form solutions for your Angular application. I create reactive forms, implement validation logic, build custom validators, create form directives, and handle complex form scenarios like multi-step wizards and dynamic forms.
## What I Do
- **Build Reactive Forms**: Create FormGroup, FormControl, and FormArray structures
- **Implement Validators**: Add built-in and custom validation logic
- **Create Async Validators**: Implement server-side validation (email exists, username available)
- **Build Custom Directives**: Create reusable form directives and behaviors
- **Add Cross-Field Validation**: Implement password confirmation, date range validation
- **Generate Dynamic Forms**: Build forms from JSON configuration
## Use Me When You Need To
- Create a registration or login form
- Implement complex validation rules
- Build a multi-step wizard form
- Create async validators for API checks
- Generate forms dynamically from configuration
- Add custom form directives
- Implement cross-field validation
## What I Can Build
1. **Registration Forms**: With validation, password strength, confirmation
2. **Multi-Step Wizards**: Complex forms with navigation and state
3. **Dynamic Forms**: Generated from JSON schema or API response
4. **Custom Validators**: Email format, password strength, custom business rules
5. **Async Validators**: Username availability, email existence checks
6. **Form Directives**: Auto-focus, input masking, custom behaviors
## Example Tasks I Handle
- "Create a registration form with email, password, and confirmation"
- "Add a custom validator for password strength"
- "Implement async validator to check if username exists"
- "Build a multi-step checkout form"
- "Generate a dynamic form from this JSON schema"
- "Create a directive to auto-format phone numbers"
- "Add cross-field validation for start/end dates"
- "Build a form array for adding multiple addresses"
## Integration with Other Agents
I build forms using:
- **Angular Core Agent**: Form components and templates
- **RxJS Agent**: Form value changes and debouncing
- **State Management Agent**: Form state in NgRx
- **TypeScript Agent**: Strongly-typed form models

51
agents/05-routing-performance.md Normal file
View File

@@ -0,0 +1,51 @@
---
description: Configures routing, implements lazy loading, creates route guards, optimizes bundle size, implements OnPush strategy, analyzes performance, and builds high-performance routing architectures for Angular applications.
capabilities: ["Configure routing with lazy loading", "Implement route guards (CanActivate, Resolve)", "Set up preloading strategies", "Optimize change detection with OnPush", "Analyze and reduce bundle size", "Implement code splitting", "Create performance optimizations"]
---
# Angular Routing & Performance Agent
## Role
I configure routing architectures, implement lazy loading, create route guards, and optimize Angular application performance. I analyze bundle sizes, implement code splitting, and apply change detection optimizations.
## What I Do
- **Configure Routing**: Set up route hierarchies, child routes, and navigation
- **Implement Lazy Loading**: Configure loadChildren for feature modules
- **Create Route Guards**: Build CanActivate, CanDeactivate, Resolve guards
- **Optimize Performance**: Implement OnPush, analyze bundles, reduce size
- **Set Up Preloading**: Configure preloading strategies for faster navigation
- **Implement Code Splitting**: Break application into optimized chunks
## Use Me When You Need To
- Set up application routing structure
- Implement lazy loading for large applications
- Create authentication guards
- Optimize bundle size and loading performance
- Implement route-based code splitting
- Add route resolvers for data preloading
- Convert components to OnPush strategy
## What I Can Build
1. **Routing Configuration**: Complete route hierarchies with lazy loading
2. **Auth Guards**: CanActivate guards for protected routes
3. **Route Resolvers**: Preload data before route activation
4. **Preloading Strategies**: Custom strategies for optimal loading
5. **Performance Optimizations**: OnPush components, bundle analysis
6. **Code Splitting**: Route-based and component-based splitting
## Example Tasks I Handle
- "Set up routing with lazy loading for admin and user modules"
- "Create an authentication guard for protected routes"
- "Implement a route resolver to preload user data"
- "Configure custom preloading strategy for critical routes"
- "Convert all components to use OnPush strategy"
- "Analyze and reduce the bundle size"
- "Implement code splitting for this large component"
- "Set up auxiliary routes for side panels"
## Integration with Other Agents
I optimize routing for:
- **Angular Core Agent**: Routed components and modules
- **RxJS Agent**: Observable-based guards and resolvers
- **State Management Agent**: Route-aware state updates
- **Testing Agent**: Guard and resolver testing

51
agents/06-state-management.md Normal file
View File

@@ -0,0 +1,51 @@
---
description: Implements NgRx store, creates actions and reducers, builds selectors, implements effects for side effects, sets up entity adapters, integrates APIs with state, and builds complete state management solutions.
capabilities: ["Set up NgRx store structure", "Create actions and reducers", "Implement selectors with memoization", "Build effects for async operations", "Configure entity adapters", "Integrate HTTP APIs with store", "Implement Angular Signals state"]
---
# State Management Implementation Agent
## Role
I implement complete state management solutions using NgRx, services, or Angular Signals. I create actions, reducers, selectors, effects, set up entity adapters, and integrate your APIs with the application state.
## What I Do
- **Set Up NgRx Store**: Create complete store structure with feature stores
- **Create Actions/Reducers**: Define state mutations with proper immutability
- **Build Selectors**: Implement memoized selectors for performance
- **Implement Effects**: Handle side effects, API calls, and async operations
- **Configure Entity Adapters**: Set up normalized state for collections
- **Integrate APIs**: Connect HTTP services to store with effects
## Use Me When You Need To
- Set up NgRx in your application
- Create a new feature store
- Implement CRUD operations with entity adapters
- Add API integration with effects
- Build selectors for derived state
- Migrate from service-based state to NgRx
- Implement Angular Signals for state management
## What I Can Build
1. **Complete NgRx Setup**: Store, actions, reducers, effects, selectors
2. **Entity-Based State**: User lists, product catalogs with CRUD
3. **API Integration**: Effects that handle HTTP calls and errors
4. **Derived State**: Complex selectors with memoization
5. **Feature Stores**: Lazy-loaded feature state modules
6. **Signal-Based State**: Modern reactivity with Angular Signals
## Example Tasks I Handle
- "Set up NgRx store for user management"
- "Create actions and reducers for product CRUD"
- "Implement effects to load users from API"
- "Build selectors to get filtered products"
- "Set up entity adapter for managing a list of items"
- "Migrate this service-based state to NgRx"
- "Create a facade service to simplify store access"
- "Implement optimistic updates for this entity"
## Integration with Other Agents
I build state management for:
- **Angular Core Agent**: Components connected to store
- **RxJS Agent**: Effects using observable operators
- **Routing Agent**: Route-aware state updates
- **Testing Agent**: Store and effects testing

52
agents/07-testing-deployment.md Normal file
View File

@@ -0,0 +1,52 @@
---
description: Writes unit tests, implements E2E tests, sets up test coverage, creates mocks and spies, optimizes production builds, configures CI/CD pipelines, and deploys Angular applications to production.
capabilities: ["Write unit tests for components/services", "Implement E2E tests with Cypress", "Set up HttpTestingController mocks", "Configure test coverage reporting", "Optimize production builds", "Set up CI/CD with GitHub Actions", "Deploy to Vercel/Firebase/Netlify"]
---
# Angular Testing & Deployment Agent
## Role
I write comprehensive tests, optimize builds, and deploy Angular applications to production. I create unit tests, E2E tests, set up CI/CD pipelines, optimize bundles, and handle production deployments.
## What I Do
- **Write Unit Tests**: Create tests for components, services, pipes, directives
- **Implement E2E Tests**: Build Cypress or Playwright test suites
- **Create Mocks**: Set up HttpTestingController, service mocks, spies
- **Optimize Builds**: Analyze and reduce bundle size, configure AOT
- **Set Up CI/CD**: Configure GitHub Actions, GitLab CI pipelines
- **Deploy Applications**: Deploy to Vercel, Firebase, Netlify, or AWS
## Use Me When You Need To
- Write tests for existing components
- Set up E2E testing framework
- Improve test coverage
- Optimize production bundle size
- Create CI/CD pipeline
- Deploy application to production
- Set up error monitoring
## What I Can Build
1. **Component Tests**: Complete test suites with fixtures and mocks
2. **Service Tests**: HTTP mocking with HttpTestingController
3. **E2E Test Suites**: User flow testing with Cypress/Playwright
4. **CI/CD Pipelines**: Automated testing and deployment
5. **Build Optimizations**: Reduced bundles with code splitting
6. **Deployment Configurations**: Production-ready deployments
## Example Tasks I Handle
- "Write unit tests for this component"
- "Create E2E tests for the login flow"
- "Set up HttpTestingController for this service"
- "Improve test coverage to 80%"
- "Analyze and reduce the bundle size"
- "Set up GitHub Actions for testing and deployment"
- "Deploy this app to Vercel"
- "Configure Sentry for error tracking"
## Integration with Other Agents
I test implementations from:
- **Angular Core Agent**: Component and service tests
- **RxJS Agent**: Observable testing with marbles
- **Forms Agent**: Form validation testing
- **State Management Agent**: Store and effects testing
- **Routing Agent**: Guard and resolver testing

247
agents/08-modern-angular.md Normal file
View File

@@ -0,0 +1,247 @@
---
description: Implements Angular 18+ modern features including Signals, standalone components, deferrable views (@defer), SSR, zoneless change detection, new control flow, and Material 3. Migrates legacy code to modern patterns.
capabilities: ["Implement Angular Signals (signal, computed, effect)", "Migrate to standalone components", "Add deferrable views with @defer", "Set up SSR and hybrid rendering", "Implement new control flow (@if, @for, @switch)", "Configure zoneless change detection", "Integrate Material 3 themes"]
---
# Modern Angular (18+) Implementation Agent
## Role
I implement cutting-edge Angular 18+ features in your application. I migrate legacy code to modern patterns using Signals, standalone components, deferrable views, SSR, zoneless change detection, and the new control flow syntax.
## What I Do
- **Implement Angular Signals**: Create reactive state with signal(), computed(), and effect()
- **Migrate to Standalone**: Convert NgModule-based apps to standalone architecture
- **Add Deferrable Views**: Implement @defer blocks for optimal lazy loading
- **Set Up SSR**: Configure server-side and hybrid rendering
- **Modern Control Flow**: Replace *ngIf/*ngFor with @if/@for/@switch
- **Zoneless Apps**: Enable zoneless change detection for better performance
- **Material 3**: Integrate latest Material Design components and themes
## Use Me When You Need To
- Migrate from NgModules to standalone components
- Implement reactive state management with Signals
- Optimize initial load with @defer blocks
- Add server-side rendering to existing app
- Update to new control flow syntax
- Remove Zone.js dependency
- Upgrade to Material 3 design system
## What I Can Build
1. **Signals-Based State**: Replace services with signal-based reactive state
2. **Standalone Migration**: Complete app conversion to standalone architecture
3. **Deferred Loading**: Strategic @defer blocks for performance optimization
4. **SSR Configuration**: Full server-side rendering setup with hydration
5. **Zoneless App**: Zone.js-free application with provideExperimentalZonelessChangeDetection
6. **Material 3 UI**: Modern Material Design components and theming
## Example Tasks I Handle
- "Migrate this app to standalone components"
- "Convert this service to use Signals instead of BehaviorSubject"
- "Add @defer blocks to optimize initial bundle size"
- "Set up server-side rendering with hybrid rendering"
- "Replace *ngIf and *ngFor with new control flow syntax"
- "Convert app to zoneless change detection"
- "Upgrade Material components to Material 3"
- "Implement computed signals for derived state"
## Modern Patterns I Implement
### Angular Signals
```typescript
// Replace BehaviorSubject with Signals
// OLD WAY
private userSubject = new BehaviorSubject<User | null>(null);
user$ = this.userSubject.asObservable();
// NEW WAY (I implement this)
user = signal<User | null>(null);
userName = computed(() => this.user()?.name ?? 'Guest');
```
### Standalone Components
```typescript
// OLD WAY
@NgModule({
declarations: [UserComponent],
imports: [CommonModule]
})
export class UserModule {}
// NEW WAY (I implement this)
@Component({
selector: 'app-user',
standalone: true,
imports: [CommonModule],
template: `...`
})
export class UserComponent {}
```
### Deferrable Views
```typescript
// I implement strategic @defer blocks
@defer (on viewport) {
<app-heavy-chart [data]="data" />
} @placeholder {
<div class="skeleton-loader"></div>
} @loading (minimum 500ms) {
<app-spinner />
} @error {
<p>Failed to load chart</p>
}
```
### New Control Flow
```typescript
// OLD WAY
<div *ngIf="user">{{ user.name }}</div>
<div *ngFor="let item of items">{{ item }}</div>
// NEW WAY (I implement this)
@if (user) {
<div>{{ user.name }}</div>
}
@for (item of items; track item.id) {
<div>{{ item }}</div>
}
```
### SSR Setup
```typescript
// I configure full SSR with hydration
export const appConfig: ApplicationConfig = {
providers: [
provideClientHydration(),
provideServerRendering()
]
};
```
### Zoneless Configuration
```typescript
// I set up zoneless change detection
export const appConfig: ApplicationConfig = {
providers: [
provideExperimentalZonelessChangeDetection()
]
};
```
## Migration Strategies
### Signals Migration Path
1. Identify BehaviorSubjects and state management
2. Convert to signals with signal()
3. Replace derived streams with computed()
4. Update subscriptions to effect()
5. Remove RxJS where Signals are better fit
### Standalone Migration Path
1. Run ng generate @angular/core:standalone migration
2. Convert components to standalone: true
3. Remove unnecessary NgModules
4. Update bootstrap to use standalone APIs
5. Clean up imports and dependencies
### SSR Migration Path
1. Add @angular/ssr package
2. Configure server.ts entry point
3. Set up hydration
4. Add SSR-safe checks (isPlatformBrowser)
5. Optimize for Core Web Vitals
## Performance Optimizations I Apply
- ✅ **Bundle Size**: @defer reduces initial load by 40-60%
- ✅ **Change Detection**: Zoneless can improve performance by 20-30%
- ✅ **LCP**: SSR dramatically improves Largest Contentful Paint
- ✅ **Memory**: Signals use less memory than RxJS subjects
- ✅ **Tree-Shaking**: Standalone components enable better tree-shaking
## Integration with Other Agents
I modernize code from:
- **TypeScript Agent**: Add proper types for Signals
- **Angular Core Agent**: Migrate to standalone components
- **RxJS Agent**: Convert observables to Signals where appropriate
- **State Management Agent**: Implement Signal-based state
- **Routing Agent**: Add @defer to lazy-loaded routes
- **Testing Agent**: Update tests for Signals and standalone
## Best Practices I Follow
1. **Signals for Simple State**: Use Signals for local component state
2. **RxJS for Complex Async**: Keep RxJS for HTTP and complex streams
3. **Strategic @defer**: Don't defer everything, be strategic
4. **SSR Compatibility**: Always check isPlatformBrowser for DOM access
5. **Gradual Migration**: Migrate incrementally, not all at once
6. **Material 3**: Use new M3 components for modern UI
7. **Zoneless Ready**: Prepare apps for zoneless future
## Common Patterns
### Signal Store Pattern
```typescript
@Injectable({ providedIn: 'root' })
export class UserStore {
private state = signal<UserState>({
users: [],
loading: false,
error: null
});
users = computed(() => this.state().users);
loading = computed(() => this.state().loading);
async loadUsers() {
this.state.update(s => ({ ...s, loading: true }));
const users = await this.api.getUsers();
this.state.update(s => ({ ...s, users, loading: false }));
}
}
```
### Deferred Component Pattern
```typescript
@defer (on interaction; prefetch on idle) {
<app-dashboard [data]="data" />
} @placeholder {
<button>Load Dashboard</button>
}
```
### SSR-Safe Pattern
```typescript
@Component({...})
export class MyComponent {
constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
ngOnInit() {
if (isPlatformBrowser(this.platformId)) {
// Browser-only code
this.initializeMap();
}
}
}
```
## Angular 18+ Feature Coverage
✅ **Signals** (signal, computed, effect)
✅ **Standalone Components** (full migration support)
✅ **Deferrable Views** (@defer with triggers)
✅ **New Control Flow** (@if, @for, @switch, @empty)
✅ **SSR & Hydration** (server-side rendering)
✅ **Zoneless** (Zone.js removal)
✅ **Material 3** (M3 components and themes)
✅ **Route Redirects as Functions** (dynamic routing)
✅ **ng-content Fallback** (default content projection)
✅ **TypeScript 5.4+** (latest TS features)
## Resources
- [Angular Signals Guide](https://angular.dev/guide/signals)
- [Standalone Components](https://angular.dev/reference/migrations/standalone)
- [Deferrable Views](https://angular.dev/guide/templates/defer)
- [SSR Guide](https://angular.dev/guide/ssr)
- [Material 3](https://material.angular.io)
- [Angular.dev](https://angular.dev) - New official docs

311
commands/assess.md Normal file
View File

@@ -0,0 +1,311 @@
# /assess - Knowledge Assessment
## Test Your Angular Knowledge
Evaluate your understanding of different Angular topics and get personalized recommendations for improvement.
## Assessment Types
### Quick Assessment (5-10 minutes)
Fast, high-level evaluation of your knowledge in a specific area.
### Comprehensive Assessment (30-45 minutes)
Deep dive into a topic with multiple question types and detailed feedback.
### Full-Stack Assessment (2-3 hours)
Complete evaluation across all 7 learning paths.
---
## 📊 Assessment by Agent
### TypeScript Fundamentals Quiz
**Quick Check** (5 questions)
1. What's the difference between `type` and `interface`?
2. Explain generic constraints
3. What are decorators and why are they important?
4. Describe async/await vs Promises
5. What are utility types?
**Topics Covered**:
- Basic types and type aliases
- Interfaces and generics
- Advanced types and patterns
- Decorators for Angular
- Error handling
**Scoring**:
- 5/5: Expert level ✅
- 4/5: Strong understanding
- 3/5: Good foundation, review advanced types
- <3/5: Review basics and practice
---
### Angular Core Architecture Quiz
**Quick Check** (5 questions)
1. Explain component lifecycle hooks
2. How does dependency injection work?
3. What's the difference between modules?
4. Template vs property binding?
5. Custom directive example?
**Topics Covered**:
- Components and templates
- Services and DI
- Modules and feature modules
- Data binding
- Directives
**Scoring**:
- 5/5: Expert level ✅
- 4/5: Strong understanding
- 3/5: Good foundation
- <3/5: Review core concepts
---
### RxJS & Reactive Programming Quiz
**Quick Check** (5 questions)
1. Difference between `switchMap` and `mergeMap`?
2. How to prevent memory leaks with subscriptions?
3. BehaviorSubject vs ReplaySubject?
4. When to use higher-order operators?
5. Error handling in streams?
**Topics Covered**:
- Observables and subjects
- RxJS operators
- Higher-order observables
- Memory management
- Error handling
**Scoring**:
- 5/5: Expert level ✅
- 4/5: Strong understanding
- 3/5: Good foundation
- <3/5: Review operator patterns
---
### Forms & Validation Quiz
**Quick Check** (5 questions)
1. Reactive vs template-driven forms?
2. Custom validator implementation?
3. Async validation pattern?
4. Form state (pristine, touched)?
5. FormArray usage example?
**Topics Covered**:
- Template-driven forms
- Reactive forms
- Validation strategies
- Form state management
- Dynamic forms
**Scoring**:
- 5/5: Expert level ✅
- 4/5: Strong understanding
- 3/5: Good foundation
- <3/5: Review form patterns
---
### Routing & Performance Quiz
**Quick Check** (5 questions)
1. How does lazy loading work?
2. Route guards implementation?
3. Change detection optimization?
4. Preloading strategies?
5. Performance metrics (Core Web Vitals)?
**Topics Covered**:
- Route configuration
- Lazy loading and code splitting
- Route guards
- Change detection
- Performance optimization
**Scoring**:
- 5/5: Expert level ✅
- 4/5: Strong understanding
- 3/5: Good foundation
- <3/5: Review routing patterns
---
### State Management Quiz
**Quick Check** (5 questions)
1. Actions, reducers, selectors explain?
2. Effects side effect handling?
3. Entity adapter advantages?
4. Facade pattern benefits?
5. When to use Signals vs Store?
**Topics Covered**:
- NgRx architecture
- Selectors and memoization
- Effects
- Entity adapters
- Angular Signals
**Scoring**:
- 5/5: Expert level ✅
- 4/5: Strong understanding
- 3/5: Good foundation
- <3/5: Review state patterns
---
### Testing & Deployment Quiz
**Quick Check** (5 questions)
1. TestBed configuration?
2. Mocking services best practice?
3. E2E testing with Cypress?
4. Build optimization techniques?
5. CI/CD pipeline setup?
**Topics Covered**:
- Unit testing (Jasmine)
- E2E testing (Cypress)
- Mocking and fixtures
- Build optimization
- Deployment strategies
**Scoring**:
- 5/5: Expert level ✅
- 4/5: Strong understanding
- 3/5: Good foundation
- <3/5: Review testing patterns
---
## 📈 Full-Stack Assessment Results Example
```
TypeScript Fundamentals ████████░░ 80% Strong
Angular Core █████████░ 90% Expert
RxJS Mastery ███████░░░ 70% Good
Forms & Validation ██████░░░░ 60% Need Work
Routing & Performance ████████░░ 80% Strong
State Management █████░░░░░ 50% Need Review
Testing & Deployment ███████░░░ 70% Good
Overall Score: 73% - Intermediate Level 📊
Recommendations:
1. Focus on Forms & Validation (60%)
2. Deep dive into State Management (50%)
3. Consider advanced TypeScript patterns
4. Good foundation for scaling applications
```
## Improvement Plan
After assessment, you'll get a personalized plan:
### Priority 1: Weak Areas (< 60%)
```
State Management & APIs - 50%
Recommended:
- Review NgRx fundamentals
- Practice reducer patterns
- Study selector composition
- Complete 3 state management projects
- Time estimate: 15-20 hours
```
### Priority 2: Areas for Growth (60-75%)
```
Forms & Validation - 60%
Recommended:
- Deep dive into reactive forms
- Practice async validators
- Study form state management
- Complete form wizard project
- Time estimate: 10-15 hours
```
### Priority 3: Advanced Topics
```
Leverage your strong areas:
- TypeScript (80%)
- Angular Core (90%)
- Routing & Performance (80%)
Next steps:
- Combine skills for complex applications
- Architecture deep dive
- Contribute to open source
```
## Assessment Retesting
After studying and practicing:
1. **Retest after 1 week** of practice
2. **Track progress** over time
3. **Identify improvement areas**
4. **Celebrate milestones** (e.g., 90% on RxJS)
## Benefits of Regular Assessment
✅ **Identify knowledge gaps** early
✅ **Track learning progress** over time
✅ **Get personalized recommendations**
✅ **Maintain learning motivation**
✅ **Validate skill acquisition**
✅ **Prepare for job interviews**
✅ **Build confidence** in your abilities
## Next Steps After Assessment
1. **Review results** carefully
2. **Focus on Priority 1** areas first
3. **Use `/learn`** to study weak areas
4. **Complete projects** in weak domains
5. **Retest** after 1-2 weeks of practice
6. **Progress to next level** when ready
---
## Quick Self-Assessment Questions
Answer these to gauge your level:
**Beginner** (0-3 months):
- [ ] Can create a component?
- [ ] Understand Angular modules?
- [ ] Use forms in templates?
- [ ] Make HTTP requests?
**Intermediate** (3-6 months):
- [ ] Master RxJS patterns?
- [ ] Implement lazy loading?
- [ ] Use reactive forms?
- [ ] Understand change detection?
**Advanced** (6+ months):
- [ ] NgRx state management?
- [ ] Performance optimization?
- [ ] Write comprehensive tests?
- [ ] Build scalable apps?
**Expert** (1+ years):
- [ ] Architecture decisions?
- [ ] Mentor other developers?
- [ ] Open source contributions?
- [ ] Leading large projects?
---
**Ready to assess your knowledge?** Choose a quiz above or take the full assessment! 📚

289
commands/explore.md Normal file
View File

@@ -0,0 +1,289 @@
# /explore - Discover Angular Agents
## Meet Your 7 Specialized Agents
Each agent is an expert in their domain, ready to guide you through every aspect of Angular development.
---
## 🎯 Agent 1: TypeScript Fundamentals
**Specialty**: TypeScript, Type System, OOP, Decorators
**Expert In**:
- Basic and advanced TypeScript types
- Object-oriented programming concepts
- Generic types and constraints
- Decorators and metadata reflection
- Async/await and Promise handling
- Modern JavaScript features
**When to Use**:
- Learning TypeScript from scratch
- Understanding complex type definitions
- Writing type-safe code
- Mastering advanced features
**Key Skills**:
- ✅ typescript-mastery
- Advanced type patterns
- Type narrowing and guards
- Conditional and mapped types
**Prerequisites**: JavaScript fundamentals
**Learning Estimate**: 20-30 hours
---
## 🏗️ Agent 2: Angular Core Architecture
**Specialty**: Components, Services, DI, Modules, Lifecycle
**Expert In**:
- Component creation and lifecycle
- Service design and patterns
- Dependency injection system
- Angular modules and feature modules
- Templates and data binding
- Built-in and custom directives
**When to Use**:
- Building Angular components
- Designing service architecture
- Understanding Angular's DI system
- Learning lifecycle hooks
**Key Skills**:
- ✅ angular-core-patterns
- Component communication
- Template syntax
- Directive creation
**Prerequisites**: TypeScript fundamentals
**Learning Estimate**: 25-35 hours
---
## ⚡ Agent 3: Reactive Programming & RxJS
**Specialty**: Observables, Subjects, Operators, Reactive Patterns
**Expert In**:
- Observable creation and subscription
- Subject types and use cases
- RxJS operators (map, filter, switchMap, etc.)
- Higher-order observables
- Memory leak prevention
- Error handling in streams
- Testing Observables
**When to Use**:
- Working with async data streams
- Implementing reactive patterns
- Managing subscriptions
- Testing Observable-based code
**Key Skills**:
- ✅ rxjs-mastery
- Operator composition
- Stream combination strategies
- Subscription management
**Prerequisites**: Angular Core concepts
**Learning Estimate**: 25-35 hours
---
## 📝 Agent 4: Forms, Validation & Directives
**Specialty**: Reactive/Template Forms, Validation, Custom Directives
**Expert In**:
- Reactive forms (FormControl, FormGroup, FormArray)
- Template-driven forms
- Form validation (built-in and custom)
- Async validators
- Custom directives
- Form accessibility
- Advanced form patterns
**When to Use**:
- Building any type of form
- Implementing complex validation
- Creating reusable form components
- Building custom directives
**Key Skills**:
- ✅ angular-forms
- Form state management
- Cross-field validation
- Dynamic form generation
**Prerequisites**: Angular Core, RxJS basics
**Learning Estimate**: 20-25 hours
---
## 🛣️ Agent 5: Routing, Performance & Advanced Patterns
**Specialty**: Routing, Lazy Loading, Performance, Angular Signals
**Expert In**:
- Route configuration and navigation
- Lazy loading and code splitting
- Route guards (CanActivate, CanDeactivate, Resolve)
- Change detection optimization
- Performance metrics and optimization
- Angular Signals and new reactivity model
- Micro-frontend architecture
**When to Use**:
- Designing application routing architecture
- Implementing lazy loading
- Optimizing bundle size and performance
- Building large-scale applications
- Understanding change detection
**Key Skills**:
- ✅ angular-routing (Performance)
- Preloading strategies
- Route caching patterns
- Bundle analysis
**Prerequisites**: Angular Core, Routing basics
**Learning Estimate**: 20-25 hours
---
## 🗄️ Agent 6: State Management & APIs
**Specialty**: NgRx, Akita, Services, Angular Signals, HTTP Integration
**Expert In**:
- Store architecture and patterns
- Actions, reducers, selectors
- Effects and side effects
- Entity adapters
- Facade pattern
- HTTP integration and caching
- Angular Signals for state
- API request handling
**When to Use**:
- Managing complex application state
- Sharing state between components
- Implementing time-travel debugging
- Normalizing API responses
- Preventing race conditions
**Key Skills**:
- ✅ state-management-advanced
- Entity patterns
- Selector composition
- API integration patterns
**Prerequisites**: Angular Core, RxJS mastery
**Learning Estimate**: 30-40 hours
---
## 🧪 Agent 7: Testing, Build & Deployment
**Specialty**: Unit/E2E Testing, Build Optimization, CI/CD, DevOps
**Expert In**:
- Unit testing with Jasmine and TestBed
- E2E testing with Cypress and Playwright
- Test coverage and strategies
- Service mocking and HTTP testing
- Build optimization (AOT, tree-shaking)
- Bundle analysis
- CI/CD pipelines (GitHub Actions, etc.)
- Deployment to various platforms
- Monitoring and error tracking
- Performance monitoring
**When to Use**:
- Writing tests for components and services
- Setting up end-to-end testing
- Optimizing production builds
- Setting up CI/CD pipelines
- Deploying to production
- Monitoring application health
**Key Skills**:
- ✅ angular-testing-deployment
- Test patterns and strategies
- Deployment best practices
- Performance monitoring
**Prerequisites**: All other agents' concepts
**Learning Estimate**: 35-50 hours
---
## 🎓 Agent Collaboration
Agents often work together:
```
TypeScript Fundamentals
↓
Angular Core Architecture
↓
┌───┴────────────────────┐
↓ ↓
RxJS Mastery Forms & Validation
↓ ↓
└───┬────────────────────┘
↓
Routing & Performance
↓
State Management & APIs
↓
Testing, Build & Deployment
```
## Quick Assessment
Answer these questions to see which agent can help you most:
1. **Do you need TypeScript help?** → Agent 1
2. **Building components/services?** → Agent 2
3. **Working with async data?** → Agent 3
4. **Creating forms?** → Agent 4
5. **Scaling application?** → Agent 5
6. **Managing state?** → Agent 6
7. **Testing/deploying?** → Agent 7
## Learning Hours by Agent
| Agent | Hours | Difficulty |
|-------|-------|-----------|
| TypeScript Fundamentals | 20-30h | Beginner |
| Angular Core | 25-35h | Beginner |
| RxJS Mastery | 25-35h | Intermediate |
| Forms & Validation | 15-20h | Intermediate |
| Routing & Performance | 20-25h | Intermediate |
| State Management | 30-40h | Advanced |
| Testing & Deployment | 35-50h | Advanced |
| **Total** | **170-235h** | **Mixed** |
## Next Steps
1. **Start with `/learn`** to choose a learning path
2. **Deep dive** into specific agents here
3. **Use `/projects`** for hands-on practice
4. **Use `/assess`** to test your knowledge
5. **Ask agents directly** for detailed guidance
---
**Ready to Master Angular?** Start with your first agent! 🚀

173
commands/learn.md Normal file
View File

@@ -0,0 +1,173 @@
# /learn - Angular Learning Paths
## Overview
Start your Angular learning journey with guided, structured learning paths tailored to your experience level and goals.
## Interactive Learning Paths
### Beginner Path (0-3 months)
Perfect for developers new to Angular who want to build a solid foundation.
**Phase 1: TypeScript Fundamentals** (Weeks 1-2)
- Basic types and interfaces
- OOP concepts
- Decorators (Essential for Angular)
- Async/await patterns
- **Agent**: TypeScript Fundamentals Agent
- **Estimated Hours**: 20-30 hours
- **Hands-on Projects**:
- Build a TypeScript utility library
- Create typed API client
- Implement design patterns
**Phase 2: Angular Core Basics** (Weeks 3-4)
- Components and templates
- Services and dependency injection
- Basic routing
- Modules
- **Agent**: Angular Core Architecture Agent
- **Estimated Hours**: 25-35 hours
- **Hands-on Projects**:
- Build a Todo application
- Create a user dashboard
- Multi-page application with routing
**Phase 3: Forms & Validation** (Weeks 5-6)
- Template-driven forms
- Form validation
- Custom validators
- **Agent**: Forms, Validation & Directives Agent
- **Estimated Hours**: 15-20 hours
- **Hands-on Projects**:
- User registration form
- Multi-step wizard
- Dynamic form generation
**Milestone**: Your first production-ready Angular app with forms, routing, and services.
### Intermediate Path (3-6 months)
For developers comfortable with Angular basics wanting to master advanced concepts.
**Phase 4: Reactive Programming** (Weeks 7-8)
- RxJS fundamentals
- Observables and subjects
- Common operators
- Higher-order observables
- **Agent**: Reactive Programming & RxJS Agent
- **Estimated Hours**: 25-35 hours
- **Hands-on Projects**:
- Real-time data streaming dashboard
- Search with debouncing
- Multi-source data combination
**Phase 5: Advanced Routing** (Weeks 9-10)
- Lazy loading
- Route guards
- Code splitting
- Change detection optimization
- **Agent**: Routing, Performance & Advanced Patterns Agent
- **Estimated Hours**: 20-25 hours
- **Hands-on Projects**:
- Large-scale application with lazy-loaded modules
- Role-based access control
- Performance-optimized routing
**Phase 6: State Management** (Weeks 11-12)
- NgRx fundamentals
- Actions and reducers
- Selectors
- Effects
- **Agent**: State Management & APIs Agent
- **Estimated Hours**: 30-40 hours
- **Hands-on Projects**:
- E-commerce cart system
- Real-time notification system
- Complex form state management
**Milestone**: Build a scalable application with proper state management and advanced routing.
### Advanced Path (6+ months)
Master enterprise patterns and optimization techniques.
**Phase 7: Testing & Performance** (Weeks 13-16)
- Unit testing with Jasmine
- E2E testing with Cypress
- Build optimization
- Deployment strategies
- **Agent**: Testing, Build & Deployment Agent
- **Estimated Hours**: 35-50 hours
- **Hands-on Projects**:
- Fully tested component library
- Production deployment pipeline
- Performance-optimized PWA
**Phase 8: Advanced Patterns** (Weeks 17-20)
- Entity adapters
- Custom state selectors
- Micro frontends
- Angular Signals
- Akita patterns
- **Agents**: Multiple agents collaboration
- **Estimated Hours**: 40-60 hours
- **Hands-on Projects**:
- Enterprise application with multiple features
- Custom framework/library
- Micro-frontend architecture
**Milestone**: Enterprise-ready Angular applications with comprehensive testing and optimization.
## Learning Tips
### Study Tips
1. **Code Along**: Don't just watch, write every example
2. **Practice Exercises**: Do the hands-on projects
3. **Build Real Apps**: Apply knowledge to real problems
4. **Code Review**: Study well-written Angular code
5. **Teach Others**: Explain concepts to reinforce learning
### Development Environment Setup
```bash
# Install Node.js 18+
node --version
# Install Angular CLI
npm install -g @angular/cli
# Create new project
ng new my-app
cd my-app
ng serve
# Generate components
ng generate component components/user-list
ng generate service services/user
ng generate module modules/shared
```
### Resources
- Official Documentation: https://angular.io
- Angular API Reference: https://angular.io/api
- Community Forum: https://gitter.im/angular/angular
- Stack Overflow: Tag: `angular`
## Assessment & Progress
After each phase, test your knowledge:
- Use `/assess` command to evaluate understanding
- Review weak areas and practice more
- Move to next phase when comfortable
## Next Steps
1. Choose your path based on experience level
2. Start with Phase 1 content
3. Complete hands-on projects
4. Move through phases sequentially
5. Use `/projects` to find practice challenges
6. Use `/explore` to dive deeper into topics
---
**Start Now**: Choose your path and begin learning! 🚀
Use `/explore` to see all 7 agents and their specialties.

515
commands/projects.md Normal file
View File

@@ -0,0 +1,515 @@
# /projects - Hands-On Projects
## Practice Your Angular Skills
Master Angular through 50+ carefully designed hands-on projects. Each project reinforces specific concepts and builds toward real-world applications.
---
## 🎯 Projects by Difficulty Level
### Beginner Projects (1-2 weeks each)
#### Project 1: Personal Portfolio Website
**Topics**: Components, templates, basic routing, styling
**Duration**: 5-7 days
**Skills**: HTML, CSS, TypeScript basics
**Requirements**:
- Home page with personal info
- About page
- Projects showcase
- Contact section
- Responsive design
**Learning Outcomes**:
✅ Component structure
✅ Template syntax
✅ Routing between pages
✅ CSS in Angular
**Code Starter**:
```typescript
@Component({
selector: 'app-portfolio',
template: `
<nav>
<a routerLink="/home">Home</a>
<a routerLink="/about">About</a>
<a routerLink="/projects">Projects</a>
</nav>
<router-outlet></router-outlet>
`
})
```
---
#### Project 2: Todo Application
**Topics**: Component interaction, event binding, @Input/@Output
**Duration**: 3-5 days
**Skills**: Components, services, lists
**Requirements**:
- Add, delete, complete todos
- Filter (all, active, completed)
- Save to localStorage
- Edit todo titles
**Learning Outcomes**:
✅ Component communication
✅ Event handling
✅ List rendering
✅ Local storage
**Key Components**:
- TodoListComponent
- TodoItemComponent
- TodoService
---
#### Project 3: Weather App
**Topics**: HTTP requests, services, API integration
**Duration**: 5-7 days
**Skills**: HttpClient, services, templates
**Requirements**:
- Search for cities
- Display weather information
- Show 5-day forecast
- Store favorites
- Display weather icons
**Learning Outcomes**:
✅ HTTP GET requests
✅ Service architecture
✅ API integration
✅ Data display
**API Suggestion**: OpenWeatherMap API
---
#### Project 4: Registration Form
**Topics**: Template-driven forms, validation, user input
**Duration**: 3-5 days
**Skills**: Forms, validation, ngModel
**Requirements**:
- Form fields (name, email, password)
- Client-side validation
- Display errors
- Submit handling
- Confirmation page
**Learning Outcomes**:
✅ Template-driven forms
✅ Built-in validators
✅ Form state
✅ Form submission
---
#### Project 5: Blog Application
**Topics**: CRUD operations, routing, services
**Duration**: 7-10 days
**Skills**: Services, routing, HTTP, templates
**Requirements**:
- List blog posts
- View post detail
- Create new post
- Edit existing post
- Delete post
- Comment system
**Learning Outcomes**:
✅ CRUD operations
✅ Route parameters
✅ Service patterns
✅ Navigation
---
### Intermediate Projects (2-4 weeks each)
#### Project 6: E-Commerce Shopping Cart
**Topics**: Reactive forms, state management basics, cart operations
**Duration**: 10-14 days
**Requirements**:
- Product listing with filters
- Shopping cart functionality
- Checkout form (reactive)
- Order summary
- Product reviews
**Learning Outcomes**:
✅ Reactive forms
✅ State management
✅ Cart operations
✅ Complex forms
---
#### Project 7: Real-Time Chat Application
**Topics**: WebSockets, services, component communication
**Duration**: 14-21 days
**Requirements**:
- User registration/login
- Real-time messaging
- User list
- Typing indicators
- Message history
- Notifications
**Learning Outcomes**:
✅ WebSocket integration
✅ Real-time data
✅ User authentication
✅ Service patterns
---
#### Project 8: Analytics Dashboard
**Topics**: RxJS operators, data transformation, charting
**Duration**: 10-14 days
**Requirements**:
- Multiple data sources
- Real-time updates
- Various chart types
- Data filtering
- Export functionality
- Performance metrics
**Learning Outcomes**:
✅ RxJS operators
✅ combineLatest, mergeMap
✅ Chart libraries
✅ Data transformation
---
#### Project 9: Task Management System
**Topics**: Drag-and-drop, forms, services, notifications
**Duration**: 12-16 days
**Requirements**:
- Create tasks with details
- Kanban board (drag-and-drop)
- Task filtering/sorting
- Team collaboration
- Due date reminders
- Activity log
**Learning Outcomes**:
✅ Angular CDK drag-drop
✅ Complex component interactions
✅ Service architecture
✅ User notifications
---
#### Project 10: Job Portal
**Topics**: Advanced routing, filtering, search, forms
**Duration**: 14-21 days
**Requirements**:
- Job listings with filters
- Advanced search
- Job detail page
- Application form
- User profiles
- Saved jobs
**Learning Outcomes**:
✅ Query parameters
✅ Complex filtering
✅ Route parameters
✅ Form patterns
---
### Advanced Projects (4-8 weeks each)
#### Project 11: Social Media Platform
**Topics**: NgRx state management, lazy loading, authorization
**Duration**: 28-42 days
**Requirements**:
- User authentication
- Post creation and feed
- Follow/unfollow users
- Comments and likes
- Notifications system
- User profiles
- Search functionality
**Learning Outcomes**:
✅ NgRx patterns
✅ Authentication guards
✅ Lazy loading features
✅ Complex state management
---
#### Project 12: Project Management Tool
**Topics**: State management, drag-drop, complex forms, real-time
**Duration**: 28-42 days
**Requirements**:
- Project creation
- Task boards (Kanban)
- Team management
- Notifications
- File uploads
- Comments on tasks
- Time tracking
**Learning Outcomes**:
✅ NgRx entity adapters
✅ Complex UI interactions
✅ Real-time updates
✅ File handling
---
#### Project 13: Learning Platform
**Topics**: Advanced routing, lazy loading, progress tracking, assessments
**Duration**: 35-49 days
**Requirements**:
- Course catalog
- Lesson content with video
- Progress tracking
- Quizzes and assessments
- Certificate generation
- User dashboard
- Discussion forums
**Learning Outcomes**:
✅ Feature module organization
✅ Lazy loading patterns
✅ Complex state
✅ Advanced routing
---
#### Project 14: Health & Fitness App
**Topics**: Charts, data visualization, PWA, offline support
**Duration**: 28-42 days
**Requirements**:
- User health data tracking
- Workout logging
- Progress charts
- Nutrition tracking
- Social features
- Offline functionality
- Mobile optimization
**Learning Outcomes**:
✅ Data visualization
✅ PWA implementation
✅ Offline support
✅ Mobile optimization
---
#### Project 15: Enterprise Dashboard
**Topics**: Performance optimization, accessibility, testing, monitoring
**Duration**: 35-49 days
**Requirements**:
- Complex analytics
- Real-time data
- Multiple chart types
- Export to PDF/Excel
- Accessibility compliance
- Comprehensive testing
- Monitoring/logging
**Learning Outcomes**:
✅ Performance optimization
✅ Accessibility (WCAG)
✅ Advanced testing
✅ Monitoring
---
## 📋 Project Selection Guide
### By Topic Focus
**Learning TypeScript?**
- Project 1: Portfolio
- Project 5: Blog App
- Project 6: Shopping Cart
**Mastering Components?**
- Project 2: Todo App
- Project 4: Registration Form
- Project 9: Task Manager
**RxJS & Observables?**
- Project 3: Weather App
- Project 8: Analytics
- Project 11: Social Media
**Forms & Validation?**
- Project 4: Registration
- Project 6: Shopping Cart
- Project 10: Job Portal
**Routing & Navigation?**
- Project 1: Portfolio
- Project 5: Blog
- Project 7: Chat
**State Management?**
- Project 11: Social Media
- Project 12: Project Mgmt
- Project 15: Dashboard
**Testing & Performance?**
- Project 14: Health App
- Project 15: Dashboard
- Any advanced project
---
## 🎓 Project Progression Path
```
Beginner
├── Project 1: Portfolio
├── Project 2: Todo App
├── Project 3: Weather App
├── Project 4: Registration
└── Project 5: Blog
↓
Intermediate
├── Project 6: Shopping Cart
├── Project 7: Chat
├── Project 8: Analytics
├── Project 9: Task Manager
└── Project 10: Job Portal
↓
Advanced
├── Project 11: Social Media
├── Project 12: Project Mgmt
├── Project 13: Learning Platform
├── Project 14: Health App
└── Project 15: Enterprise Dashboard
```
---
## 🚀 Project Best Practices
### Before Starting
- [ ] Understand all project requirements
- [ ] Break down into smaller tasks
- [ ] Plan component structure
- [ ] Design database schema (if applicable)
- [ ] Setup version control (Git)
### During Development
- [ ] Follow Angular style guide
- [ ] Commit regularly with clear messages
- [ ] Write unit tests as you go
- [ ] Document complex code
- [ ] Test edge cases
### After Completion
- [ ] Review code quality
- [ ] Add E2E tests
- [ ] Optimize performance
- [ ] Write documentation
- [ ] Deploy to production
- [ ] Get code review
---
## 💡 Getting Help
For each project:
- **Stuck on concept?** → Use `/explore` to find relevant agent
- **Need specific skills?** → Review agent's SKILL.md
- **Want to learn more?** → Use `/learn` for detailed guidance
- **Test your knowledge?** → Use `/assess` after project
---
## 🏆 Project Completion Checklist
After each project, verify:
- [ ] All features implemented
- [ ] Responsive design
- [ ] Error handling
- [ ] Code follows best practices
- [ ] Unit tests (min 70% coverage)
- [ ] E2E tests for critical flows
- [ ] Accessible (WCAG 2.1)
- [ ] Performance optimized
- [ ] Documentation complete
- [ ] Code review passed
---
## 📊 Project Statistics
| Level | Projects | Duration | Skills |
|-------|----------|----------|--------|
| Beginner | 5 | 5-7 weeks | 15-20 |
| Intermediate | 5 | 10-15 weeks | 20-30 |
| Advanced | 5 | 15-25 weeks | 30-40+ |
**Total**: 15 projects, 30-47 weeks, mastery of 60+ Angular/Web skills
---
## 🎁 Bonus Projects
### Full-Stack Development
- Build backend API (Node.js/Express)
- Connect Angular frontend
- Deploy together
- Full CRUD with backend
### Open Source Contributions
- Contribute to Angular libraries
- Fix bugs in projects
- Create reusable components
- Publish to npm
### Portfolio Showcase
- Deploy projects online
- Create GitHub portfolios
- Document your work
- Build personal brand
---
## Next Steps
1. **Choose your level**: Beginner, Intermediate, or Advanced
2. **Pick your first project**: Start with recommended sequence
3. **Study required topics**: Review agent skills needed
4. **Build the project**: Implement all requirements
5. **Get feedback**: Share on GitHub, get reviews
6. **Move to next project**: Progress through the path
---
**Ready to Build?** Choose a project and start coding! 🛠️
Use `/learn` for structured learning paths and `/explore` to understand concepts better.

121
plugin.lock.json Normal file
View File

@@ -0,0 +1,121 @@
{
"$schema": "internal://schemas/plugin.lock.v1.json",
"pluginId": "gh:pluginagentmarketplace/custom-plugin-angular:",
"normalized": {
"repo": null,
"ref": "refs/tags/v20251128.0",
"commit": "7e36039c69452b79fa8c4a293d341ffe9ab3f6ca",
"treeHash": "92a9331bd26b73f081005c2b14529dec405dc99c8ec124907523c55160e7472e",
"generatedAt": "2025-11-28T10:27:38.328325Z",
"toolVersion": "publish_plugins.py@0.2.0"
},
"origin": {
"remote": "git@github.com:zhongweili/42plugin-data.git",
"branch": "master",
"commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
"repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
},
"manifest": {
"name": "angular-dev",
"description": "Professional Angular 18+ development plugin with 8 specialized implementation agents. Build modern Angular apps with Signals, standalone components, SSR, @defer blocks, TypeScript, RxJS, NgRx, forms, routing, testing, and CI/CD.",
"version": "2.0.0"
},
"content": {
"files": [
{
"path": "README.md",
"sha256": "b6a8353777d877c29bfe653fa1024e3f556a9fb83a04bbcec3dd4a28bcc06e74"
},
{
"path": "agents/03-reactive-programming.md",
"sha256": "137e8daf5b3ac3d481b52eb758c830157fe40b717b4548fbec7f09d7c11593d6"
},
{
"path": "agents/05-routing-performance.md",
"sha256": "c852a540f50bbc332afda9d280a64069509512278112e78c355be1c69374fc54"
},
{
"path": "agents/02-angular-core.md",
"sha256": "7ad9024c08089832527f65c8ed3f8ed93ca3d670b285c3bb4f7d85280eab048f"
},
{
"path": "agents/06-state-management.md",
"sha256": "5590b7db96b160f1dfa7be801433d79e2c99752dc676759b4ed20d4c7f12122b"
},
{
"path": "agents/01-typescript-fundamentals.md",
"sha256": "94388259da8bbedb6f59d88ec653abb4af16e592c4ec671d3e953e2c11cbb251"
},
{
"path": "agents/08-modern-angular.md",
"sha256": "61f50b9d713ba9e55891b490705adb8afd62b21b90e9c060629bd71afc247ee9"
},
{
"path": "agents/04-forms-directives.md",
"sha256": "7a3bf01c2a25da04eb86fd477c9a0505ded24231e3df7f6af5d53d8c22fad0cb"
},
{
"path": "agents/07-testing-deployment.md",
"sha256": "efa9ce66ab91cfc1aec26d66723f4cf713ed2b144ed2d70feaf55c4389585715"
},
{
"path": ".claude-plugin/plugin.json",
"sha256": "724ad42da697237bc7919322a82be3cdcd2c211cd44542b37c928f5c07569c00"
},
{
"path": "commands/explore.md",
"sha256": "09ce5d513b114736d89925e79a8f9d45d2d690e009d80307afd510a3fcbb2103"
},
{
"path": "commands/learn.md",
"sha256": "81c16e4bda243cc29381e166eea6a4411f5d937fe280af41acb11b216594cf12"
},
{
"path": "commands/assess.md",
"sha256": "735f02b5a47faa80d3d98d0015dabf951abfeeb80859c9bb2f4c7b4f4a31242c"
},
{
"path": "commands/projects.md",
"sha256": "c6c4380abc9ce7ac4e4e89fffd11b2f527ea5a97f616148519eac7a74b8bd06a"
},
{
"path": "skills/forms/SKILL.md",
"sha256": "d81c890606276c57546224753ac680319c209227d2025d5cf5045fbbad3f91e1"
},
{
"path": "skills/core/SKILL.md",
"sha256": "69133eda0819a7aea2c5faf1bde555caf4b58e6c0043db153c134de1101b5533"
},
{
"path": "skills/typescript/SKILL.md",
"sha256": "020e5b19cb57e2a978b165ffab780f683c6ce1bc9eb37b8b528812fe4b0b86ad"
},
{
"path": "skills/modern-angular/SKILL.md",
"sha256": "01abf4063129662a7f598d23d5b2b6ae4a623e3ca80099dc5edfb939725c6e88"
},
{
"path": "skills/testing/SKILL.md",
"sha256": "e7816a65d4c82d9737b51db8f2da2949e80730a076199f0e65b5fb6f8d050f58"
},
{
"path": "skills/state-management/SKILL.md",
"sha256": "ad03b8dd03705f6e209ca5d77cb7eef8ceadeec2223b1b6a9940b129d0c668e9"
},
{
"path": "skills/rxjs/SKILL.md",
"sha256": "02813596e666399e359b59131b487fd23d04554dcd80507f03f695134126c1d2"
},
{
"path": "skills/routing/SKILL.md",
"sha256": "e64bd4fda01eb2c1cf1cb4aae110bee89cbd1ed7ae6a407e5ea41b9286fea076"
}
],
"dirSha256": "92a9331bd26b73f081005c2b14529dec405dc99c8ec124907523c55160e7472e"
},
"security": {
"scannedAt": null,
"scannerVersion": null,
"flags": []
}
}

336
skills/core/SKILL.md Normal file
View File

@@ -0,0 +1,336 @@
---
name: angular-core-implementation
description: Generate Angular components, services, modules, and directives. Implement dependency injection, lifecycle hooks, data binding, and build production-ready Angular architectures.
---
# Angular Core Implementation Skill
## Quick Start
### Component Basics
```typescript
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-user-card',
template: `
<div class="card">
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
<button (click)="onDelete()">Delete</button>
</div>
`,
styles: [`
.card { border: 1px solid #ddd; padding: 16px; }
`]
})
export class UserCardComponent {
@Input() user!: User;
@Output() deleted = new EventEmitter<void>();
onDelete() {
this.deleted.emit();
}
}
```
### Service Creation
```typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root' // Singleton service
})
export class UserService {
private apiUrl = '/api/users';
constructor(private http: HttpClient) {}
getUsers(): Observable<User[]> {
return this.http.get<User[]>(this.apiUrl);
}
getUser(id: number): Observable<User> {
return this.http.get<User>(`${this.apiUrl}/${id}`);
}
createUser(user: User): Observable<User> {
return this.http.post<User>(this.apiUrl, user);
}
}
```
### Dependency Injection
```typescript
@Injectable()
export class NotificationService {
constructor(
private logger: LoggerService,
private config: ConfigService
) {}
notify(message: string) {
this.logger.log(message);
}
}
```
## Core Concepts
### Lifecycle Hooks
```typescript
export class UserListComponent implements
OnInit,
OnChanges,
OnDestroy
{
@Input() users: User[] = [];
ngOnInit() {
// Initialize component, fetch data
this.loadUsers();
}
ngOnChanges(changes: SimpleChanges) {
// Respond to input changes
if (changes['users']) {
this.onUsersChanged();
}
}
ngOnDestroy() {
// Cleanup subscriptions, remove listeners
this.subscription?.unsubscribe();
}
private loadUsers() { /* ... */ }
private onUsersChanged() { /* ... */ }
}
```
**Lifecycle Order:**
1. `ngOnChanges` - When input properties change
2. `ngOnInit` - After first ngOnChanges
3. `ngDoCheck` - Every change detection cycle
4. `ngAfterContentInit` - After content is initialized
5. `ngAfterContentChecked` - After content is checked
6. `ngAfterViewInit` - After view is initialized
7. `ngAfterViewChecked` - After view is checked
8. `ngOnDestroy` - When component is destroyed
### Modules
```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
UserListComponent,
UserDetailComponent,
UserFormComponent
],
imports: [
CommonModule,
FormsModule
],
exports: [
UserListComponent,
UserDetailComponent
]
})
export class UserModule { }
```
### Lazy Loading
```typescript
const routes: Routes = [
{ path: 'users', loadChildren: () =>
import('./users/users.module').then(m => m.UsersModule)
}
];
```
## Advanced Patterns
### Content Projection
```typescript
// Parent component
<app-card>
<div class="header">Card Title</div>
<div class="content">Card content</div>
</app-card>
// Card component
@Component({
selector: 'app-card',
template: `
<div class="card">
<ng-content select=".header"></ng-content>
<ng-content select=".content"></ng-content>
<ng-content></ng-content>
</div>
`
})
export class CardComponent { }
```
### ViewChild and ContentChild
```typescript
@Component({
selector: 'app-form',
template: `<app-input #firstInput></app-input>`
})
export class FormComponent implements AfterViewInit {
@ViewChild('firstInput') firstInput!: InputComponent;
ngAfterViewInit() {
this.firstInput.focus();
}
}
```
### Custom Directive
```typescript
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) {
this.el.nativeElement.style.backgroundColor = 'yellow';
}
}
// Usage: <p appHighlight>Highlighted text</p>
```
## Encapsulation
### View Encapsulation Modes
```typescript
@Component({
selector: 'app-card',
template: `<div class="card">...</div>`,
styles: [`.card { color: blue; }`],
encapsulation: ViewEncapsulation.Emulated // Default
})
export class CardComponent { }
```
- **Emulated** (default): CSS scoped to component
- **None**: Global styles
- **ShadowDom**: Uses browser shadow DOM
## Change Detection
### OnPush Strategy
```typescript
@Component({
selector: 'app-user',
template: `<div>{{ user.name }}</div>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent {
@Input() user!: User;
constructor(private cdr: ChangeDetectorRef) {}
manualDetection() {
this.cdr.markForCheck();
}
}
```
## Provider Patterns
### Multi-Provider
```typescript
@NgModule({
providers: [
{ provide: VALIDATORS, useValue: emailValidator, multi: true },
{ provide: VALIDATORS, useValue: minLengthValidator, multi: true }
]
})
export class ValidatorsModule { }
```
### Factory Pattern
```typescript
@NgModule({
providers: [
{
provide: ConfigService,
useFactory: (env: EnvironmentService) => {
return env.production ?
new ProdConfigService() :
new DevConfigService();
},
deps: [EnvironmentService]
}
]
})
export class AppModule { }
```
## Testing Components
```typescript
describe('UserCardComponent', () => {
let component: UserCardComponent;
let fixture: ComponentFixture<UserCardComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [UserCardComponent]
}).compileComponents();
fixture = TestBed.createComponent(UserCardComponent);
component = fixture.componentInstance;
});
it('should emit deleted when delete button clicked', () => {
spyOn(component.deleted, 'emit');
component.user = { id: 1, name: 'John', email: 'john@example.com' };
fixture.detectChanges();
fixture.debugElement.query(By.css('button')).nativeElement.click();
expect(component.deleted.emit).toHaveBeenCalled();
});
});
```
## Performance Optimization
1. **Use OnPush**: Reduces change detection cycles
2. **Unsubscribe**: Prevent memory leaks
3. **TrackBy**: Optimize *ngFor rendering
4. **Lazy Load**: Load modules on demand
5. **Avoid property binding in templates**: Use async pipe
```typescript
// Bad
users: User[] = [];
// Good
users$ = this.userService.getUsers();
<!-- Template -->
<app-user *ngFor="let user of users$ | async; trackBy: trackByUserId">
</app-user>
```
## Best Practices
1. **Smart vs Presentational**: Container components handle logic
2. **One Responsibility**: Each component has a single purpose
3. **Input/Output**: Use @Input/@Output for communication
4. **Services**: Handle business logic and HTTP
5. **DI**: Always use dependency injection
6. **OnDestroy**: Clean up subscriptions
## Resources
- [Angular Documentation](https://angular.io/docs)
- [Angular Best Practices](https://angular.io/guide/styleguide)
- [Component Interaction](https://angular.io/guide/component-interaction)

381
skills/forms/SKILL.md Normal file
View File

@@ -0,0 +1,381 @@
---
name: forms-implementation
description: Build reactive and template-driven forms, implement custom validators, create async validators, add cross-field validation, and generate dynamic forms for Angular applications.
---
# Forms Implementation Skill
## Quick Start
### Template-Driven Forms
```typescript
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-contact',
template: `
<form #contactForm="ngForm" (ngSubmit)="onSubmit(contactForm)">
<input
[(ngModel)]="model.name"
name="name"
required
minlength="3"
/>
<input
[(ngModel)]="model.email"
name="email"
email
/>
<button [disabled]="!contactForm.valid">Submit</button>
</form>
`
})
export class ContactComponent {
model = { name: '', email: '' };
onSubmit(form: NgForm) {
if (form.valid) {
console.log('Form submitted:', form.value);
}
}
}
```
### Reactive Forms
```typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-user-form',
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input formControlName="name" placeholder="Name" />
<input formControlName="email" type="email" />
<input formControlName="password" type="password" />
<button [disabled]="form.invalid">Register</button>
</form>
`
})
export class UserFormComponent implements OnInit {
form!: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
name: ['', [Validators.required, Validators.minLength(3)]],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(8)]]
});
}
onSubmit() {
if (this.form.valid) {
console.log(this.form.value);
}
}
}
```
## Form Controls
### FormControl
```typescript
// Create standalone control
const nameControl = new FormControl('', Validators.required);
// Get value
nameControl.value
// Set value
nameControl.setValue('John');
nameControl.patchValue({ name: 'John' });
// Check validity
nameControl.valid
nameControl.invalid
nameControl.errors
// Listen to changes
nameControl.valueChanges.subscribe(value => {
console.log('Changed:', value);
});
```
### FormGroup
```typescript
const form = new FormGroup({
name: new FormControl('', Validators.required),
email: new FormControl('', [Validators.required, Validators.email]),
address: new FormGroup({
street: new FormControl(''),
city: new FormControl(''),
zip: new FormControl('')
})
});
// Access nested controls
form.get('address.street')?.setValue('123 Main St');
// Update multiple values
form.patchValue({
name: 'John',
email: 'john@example.com'
});
```
### FormArray
```typescript
const form = new FormGroup({
name: new FormControl(''),
emails: new FormArray([
new FormControl(''),
new FormControl('')
])
});
// Dynamic form array
const emailsArray = form.get('emails') as FormArray;
// Add control
emailsArray.push(new FormControl(''));
// Remove control
emailsArray.removeAt(0);
// Iterate
emailsArray.controls.forEach((control, index) => {
// ...
});
```
## Validation
### Built-in Validators
```typescript
import { Validators } from '@angular/forms';
new FormControl('', [
Validators.required,
Validators.minLength(3),
Validators.maxLength(50),
Validators.pattern(/^[a-z]/i),
Validators.email,
Validators.min(0),
Validators.max(100)
])
```
### Custom Validators
```typescript
// Simple validator
function noSpacesValidator(control: AbstractControl): ValidationErrors | null {
if (control.value && control.value.includes(' ')) {
return { hasSpaces: true };
}
return null;
}
// Cross-field validator
function passwordMatchValidator(group: FormGroup): ValidationErrors | null {
const password = group.get('password')?.value;
const confirm = group.get('confirmPassword')?.value;
return password === confirm ? null : { passwordMismatch: true };
}
// Usage
const form = new FormGroup({
username: new FormControl('', noSpacesValidator),
password: new FormControl(''),
confirmPassword: new FormControl('')
}, passwordMatchValidator);
```
### Async Validators
```typescript
function emailAvailableValidator(service: UserService): AsyncValidatorFn {
return (control: AbstractControl): Observable<ValidationErrors | null> => {
if (!control.value) {
return of(null);
}
return service.checkEmailAvailable(control.value).pipe(
map(available => available ? null : { emailTaken: true }),
debounceTime(300),
first()
);
};
}
// Usage
new FormControl('', {
validators: Validators.required,
asyncValidators: emailAvailableValidator(userService),
updateOn: 'blur'
});
```
## Form State
```typescript
const control = form.get('email')!;
// Pristine/Dirty
control.pristine // Not modified by user
control.dirty // Modified by user
// Touched/Untouched
control.untouched // Never focused
control.touched // Focused at least once
// Valid/Invalid
control.valid
control.invalid
control.errors
control.pending // Async validation in progress
// Status
control.status // 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED'
// Value
control.value
control.getRawValue() // Include disabled controls
```
## Form Display
### Showing Errors
```typescript
<div *ngIf="form.get('email')?.hasError('required')">
Email is required
</div>
<div *ngIf="form.get('email')?.hasError('email')">
Invalid email format
</div>
<div *ngIf="form.get('email')?.hasError('emailTaken')">
Email already in use
</div>
```
### Dynamic Forms
```typescript
@Component({
template: `
<form [formGroup]="form">
<div formArrayName="items">
<div *ngFor="let item of items.controls; let i = index">
<input [formControlName]="i" />
<button (click)="removeItem(i)">Remove</button>
</div>
</div>
<button (click)="addItem()">Add Item</button>
</form>
`
})
export class DynamicFormComponent {
form!: FormGroup;
get items() {
return this.form.get('items') as FormArray;
}
addItem() {
this.items.push(new FormControl('', Validators.required));
}
removeItem(index: number) {
this.items.removeAt(index);
}
}
```
## Advanced Patterns
### FormBuilder Groups
```typescript
this.form = this.fb.group({
basicInfo: this.fb.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
}),
address: this.fb.group({
street: [''],
city: [''],
zip: ['']
}),
preferences: this.fb.array([])
});
```
### Directives for Template Forms
```typescript
<form #form="ngForm">
<input
[(ngModel)]="user.name"
name="name"
required
minlength="3"
#nameField="ngModelGroup"
/>
<div *ngIf="nameField.invalid && nameField.touched">
<p *ngIf="nameField.errors?.['required']">Required</p>
<p *ngIf="nameField.errors?.['minlength']">Min length 3</p>
</div>
</form>
```
## Testing Forms
```typescript
describe('UserFormComponent', () => {
let component: UserFormComponent;
let fixture: ComponentFixture<UserFormComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [UserFormComponent],
imports: [ReactiveFormsModule]
}).compileComponents();
fixture = TestBed.createComponent(UserFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should submit valid form', () => {
component.form.patchValue({
name: 'John',
email: 'john@example.com'
});
expect(component.form.valid).toBe(true);
});
it('should show error on invalid email', () => {
component.form.get('email')?.setValue('invalid');
expect(component.form.get('email')?.hasError('email')).toBe(true);
});
});
```
## Best Practices
1. **Reactive Forms for Complex**: Use for validation, computed fields
2. **Template Forms for Simple**: Use for simple, data-binding heavy forms
3. **Always validate**: Server and client validation
4. **Disable submit until valid**: Better UX
5. **Show errors appropriately**: After touched/dirty
6. **Handle async validation**: Debounce, cancel on unsubscribe
7. **Test forms thoroughly**: Validation, submission, edge cases
## Resources
- [Angular Forms Guide](https://angular.io/guide/forms)
- [Reactive Forms](https://angular.io/guide/reactive-forms)
- [Form Validation](https://angular.io/guide/form-validation)

586
skills/modern-angular/SKILL.md Normal file
View File

@@ -0,0 +1,586 @@
---
name: modern-angular-implementation
description: Implement Angular 18+ features: Signals, standalone components, @defer blocks, SSR, zoneless change detection, new control flow syntax, and Material 3 integration.
---
# Modern Angular Implementation Skill
## Angular Signals
### Basic Signals
```typescript
import { Component, signal, computed, effect } from '@angular/core';
@Component({
selector: 'app-counter',
standalone: true,
template: `
<button (click)="increment()">{{ count() }}</button>
<p>Double: {{ double() }}</p>
`
})
export class CounterComponent {
// Writable signal
count = signal(0);
// Computed signal (auto-updates)
double = computed(() => this.count() * 2);
constructor() {
// Effect (side effects)
effect(() => {
console.log('Count changed:', this.count());
});
}
increment() {
this.count.update(n => n + 1);
// or: this.count.set(this.count() + 1);
}
}
```
### Signal Store Pattern
```typescript
@Injectable({ providedIn: 'root' })
export class UserStore {
// Private state signal
private state = signal<{
users: User[];
loading: boolean;
error: string | null;
}>({
users: [],
loading: false,
error: null
});
// Public computed selectors
readonly users = computed(() => this.state().users);
readonly loading = computed(() => this.state().loading);
readonly error = computed(() => this.state().error);
readonly userCount = computed(() => this.users().length);
// Actions
async loadUsers() {
this.state.update(s => ({ ...s, loading: true }));
try {
const users = await this.http.get<User[]>('/api/users');
this.state.update(s => ({ ...s, users, loading: false }));
} catch (error) {
this.state.update(s => ({
...s,
error: error.message,
loading: false
}));
}
}
addUser(user: User) {
this.state.update(s => ({
...s,
users: [...s.users, user]
}));
}
}
```
### Signals vs RxJS
```typescript
// ❌ OLD: RxJS BehaviorSubject
private userSubject = new BehaviorSubject<User | null>(null);
user$ = this.userSubject.asObservable();
userName$ = this.user$.pipe(map(u => u?.name ?? 'Guest'));
ngOnDestroy() {
this.userSubject.complete();
}
// ✅ NEW: Angular Signals
user = signal<User | null>(null);
userName = computed(() => this.user()?.name ?? 'Guest');
// No cleanup needed!
```
## Standalone Components
### Basic Standalone Component
```typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
@Component({
selector: 'app-dashboard',
standalone: true,
imports: [CommonModule, RouterModule], // Import dependencies directly
template: `
<h1>Dashboard</h1>
<router-outlet />
`
})
export class DashboardComponent {}
```
### Standalone Bootstrap
```typescript
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';
bootstrapApplication(AppComponent, {
providers: [
provideRouter(routes),
provideHttpClient(),
// Add other providers
]
});
```
### Standalone Routes
```typescript
// app.routes.ts
import { Routes } from '@angular/router';
export const routes: Routes = [
{
path: '',
loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)
},
{
path: 'users',
loadChildren: () => import('./users/users.routes').then(m => m.USERS_ROUTES)
}
];
```
### Migration Command
```bash
# Automated migration to standalone
ng generate @angular/core:standalone
```
## Deferrable Views (@defer)
### Basic @defer
```typescript
@defer {
<app-heavy-component />
} @placeholder {
<div class="loading-skeleton"></div>
}
```
### Defer with Triggers
```typescript
// On viewport (when visible)
@defer (on viewport) {
<app-chart [data]="data" />
} @placeholder {
<div class="chart-placeholder"></div>
}
// On interaction (click or keydown)
@defer (on interaction) {
<app-advanced-editor />
} @placeholder {
<button>Load Editor</button>
}
// On hover
@defer (on hover) {
<app-tooltip [content]="tooltipContent" />
}
// On idle (browser idle)
@defer (on idle) {
<app-analytics-dashboard />
}
// On timer
@defer (on timer(5s)) {
<app-promotional-banner />
}
```
### Advanced @defer with States
```typescript
@defer (on interaction; prefetch on idle) {
<app-video-player [src]="videoUrl" />
} @loading (minimum 500ms; after 100ms) {
<app-spinner />
} @placeholder (minimum 1s) {
<button>Load Video Player</button>
} @error {
<p>Failed to load video player</p>
}
```
### Strategic Deferment
```typescript
<div class="page">
<!-- Critical content loads immediately -->
<app-header />
<app-hero-section />
<!-- Defer below-the-fold content -->
@defer (on viewport) {
<app-features-section />
}
@defer (on viewport) {
<app-testimonials />
}
<!-- Defer interactive widgets -->
@defer (on interaction; prefetch on idle) {
<app-chat-widget />
} @placeholder {
<button class="chat-trigger">Chat with us</button>
}
</div>
```
## New Control Flow
### @if (replaces *ngIf)
```typescript
// OLD
<div *ngIf="user">{{ user.name }}</div>
<div *ngIf="user; else loading">{{ user.name }}</div>
// NEW
@if (user) {
<div>{{ user.name }}</div>
}
@if (user) {
<div>{{ user.name }}</div>
} @else {
<div>Loading...</div>
}
```
### @for (replaces *ngFor)
```typescript
// OLD
<div *ngFor="let item of items; trackBy: trackById">
{{ item.name }}
</div>
// NEW
@for (item of items; track item.id) {
<div>{{ item.name }}</div>
} @empty {
<p>No items found</p>
}
```
### @switch (replaces *ngSwitch)
```typescript
// OLD
<div [ngSwitch]="status">
<p *ngSwitchCase="'loading'">Loading...</p>
<p *ngSwitchCase="'error'">Error occurred</p>
<p *ngSwitchDefault>Success</p>
</div>
// NEW
@switch (status) {
@case ('loading') {
<p>Loading...</p>
}
@case ('error') {
<p>Error occurred</p>
}
@default {
<p>Success</p>
}
}
```
### Combined Control Flow
```typescript
@if (users.length > 0) {
<ul>
@for (user of users; track user.id) {
<li>
{{ user.name }}
@if (user.isAdmin) {
<span class="badge">Admin</span>
}
</li>
} @empty {
<li>No users found</li>
}
</ul>
} @else {
<p>Loading users...</p>
}
```
## Server-Side Rendering (SSR)
### Enable SSR
```bash
# Add SSR to existing project
ng add @angular/ssr
# Or create new project with SSR
ng new my-app --ssr
```
### SSR Configuration
```typescript
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';
export const appConfig: ApplicationConfig = {
providers: [
provideClientHydration() // Enable hydration
]
};
```
### SSR-Safe Code
```typescript
import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
@Component({...})
export class MapComponent {
constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
ngOnInit() {
// Only run in browser
if (isPlatformBrowser(this.platformId)) {
this.initializeMap();
this.loadGoogleMapsAPI();
}
}
private initializeMap() {
// Browser-specific code
const map = new google.maps.Map(document.getElementById('map'));
}
}
```
### Transfer State (Avoid Duplicate Requests)
```typescript
import { Component, makeStateKey, TransferState } from '@angular/core';
const USERS_KEY = makeStateKey<User[]>('users');
@Component({...})
export class UsersComponent {
constructor(
private http: HttpClient,
private transferState: TransferState
) {}
loadUsers() {
// Check if data exists in transfer state (from SSR)
const users = this.transferState.get(USERS_KEY, null);
if (users) {
// Use cached data from SSR
return of(users);
}
// Fetch from API and cache for hydration
return this.http.get<User[]>('/api/users').pipe(
tap(users => this.transferState.set(USERS_KEY, users))
);
}
}
```
## Zoneless Change Detection
### Enable Zoneless
```typescript
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';
export const appConfig: ApplicationConfig = {
providers: [
provideExperimentalZonelessChangeDetection()
]
};
```
### Zoneless-Compatible Code
```typescript
@Component({...})
export class MyComponent {
count = signal(0); // Signals work great with zoneless!
// Manual change detection when needed
constructor(private cdr: ChangeDetectorRef) {}
onManualUpdate() {
this.legacyProperty = 'new value';
this.cdr.markForCheck(); // Trigger change detection manually
}
}
```
## Material 3
### Install Material 3
```bash
ng add @angular/material
```
### Material 3 Theme
```scss
// styles.scss
@use '@angular/material' as mat;
$my-theme: mat.define-theme((
color: (
theme-type: light,
primary: mat.$azure-palette,
),
));
html {
@include mat.all-component-themes($my-theme);
}
// Dark mode
html.dark-theme {
$dark-theme: mat.define-theme((
color: (
theme-type: dark,
primary: mat.$azure-palette,
),
));
@include mat.all-component-colors($dark-theme);
}
```
### Material 3 Components
```typescript
import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
@Component({
standalone: true,
imports: [MatButtonModule, MatCardModule, MatIconModule],
template: `
<mat-card appearance="outlined">
<mat-card-header>
<mat-card-title>Material 3 Card</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>Beautiful Material Design 3 components</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>Action</button>
<button mat-raised-button color="primary">
<mat-icon>favorite</mat-icon>
Primary
</button>
</mat-card-actions>
</mat-card>
`
})
export class MaterialCardComponent {}
```
## Migration Patterns
### NgModule → Standalone
```typescript
// BEFORE: NgModule
@NgModule({
declarations: [UserComponent, UserListComponent],
imports: [CommonModule, RouterModule],
exports: [UserComponent]
})
export class UserModule {}
// AFTER: Standalone
export const USER_ROUTES: Routes = [{
path: '',
loadComponent: () => import('./user.component').then(m => m.UserComponent)
}];
@Component({
standalone: true,
imports: [CommonModule, RouterModule]
})
export class UserComponent {}
```
### RxJS → Signals
```typescript
// BEFORE: RxJS
class UserService {
private usersSubject = new BehaviorSubject<User[]>([]);
users$ = this.usersSubject.asObservable();
addUser(user: User) {
const current = this.usersSubject.value;
this.usersSubject.next([...current, user]);
}
}
// AFTER: Signals
class UserService {
users = signal<User[]>([]);
addUser(user: User) {
this.users.update(users => [...users, user]);
}
}
```
## Performance Optimization
### Bundle Size Reduction with @defer
```typescript
// Can reduce initial bundle by 40-60%!
@defer (on viewport) {
<app-heavy-chart-library />
}
```
### Zoneless Performance Gains
```typescript
// 20-30% performance improvement
provideExperimentalZonelessChangeDetection()
```
### SSR Core Web Vitals
```typescript
// Dramatically improves LCP, FCP, TTFB
provideClientHydration()
```
## Best Practices
1. **Use Signals for Simple State** - Perfect for component-local reactive state
2. **Keep RxJS for Complex Async** - Still best for HTTP, WebSockets, complex operators
3. **Strategic @defer** - Don't defer critical content, be strategic
4. **Gradual Migration** - Migrate to standalone incrementally
5. **SSR-Safe Guards** - Always check isPlatformBrowser for DOM access
6. **Zoneless-Ready** - Use Signals and OnPush to prepare for zoneless future
## Resources
- [Signals Documentation](https://angular.dev/guide/signals)
- [Standalone Migration](https://angular.dev/reference/migrations/standalone)
- [@defer Guide](https://angular.dev/guide/templates/defer)
- [SSR Guide](https://angular.dev/guide/ssr)
- [Material 3](https://material.angular.io)

437
skills/routing/SKILL.md Normal file
View File

@@ -0,0 +1,437 @@
---
name: routing-performance-implementation
description: Configure routing with lazy loading, implement route guards, set up preloading strategies, optimize change detection, analyze bundles, and implement performance optimizations.
---
# Routing & Performance Implementation Skill
## Quick Start
### Basic Routing
```typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent, AboutComponent, NotFoundComponent } from './components';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', component: NotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
```
### Navigation
```typescript
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
template: `
<button (click)="goHome()">Home</button>
<a routerLink="/about">About</a>
<a routerLink="/users" [queryParams]="{ tab: 'active' }">Users</a>
`
})
export class NavComponent {
constructor(private router: Router) {}
goHome() {
this.router.navigate(['/']);
}
}
```
### Route Parameters
```typescript
const routes: Routes = [
{ path: 'users/:id', component: UserDetailComponent },
{ path: 'users/:id/posts/:postId', component: PostDetailComponent }
];
// Component
@Component({...})
export class UserDetailComponent {
userId!: string;
constructor(private route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.userId = params['id'];
});
}
}
// Or with snapshot
ngOnInit() {
const id = this.route.snapshot.params['id'];
}
```
## Lazy Loading
### Feature Modules with Lazy Loading
```typescript
// app-routing.module.ts
const routes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'users',
loadChildren: () => import('./users/users.module').then(m => m.UsersModule)
},
{
path: 'products',
loadChildren: () => import('./products/products.module').then(m => m.ProductsModule)
}
];
// users/users-routing.module.ts
const routes: Routes = [
{ path: '', component: UserListComponent },
{ path: ':id', component: UserDetailComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UsersRoutingModule { }
```
### Lazy Loading with Standalone Components
```typescript
const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.routes').then(m => m.ADMIN_ROUTES)
}
];
// admin/admin.routes.ts
export const ADMIN_ROUTES: Routes = [
{ path: '', component: AdminDashboardComponent },
{ path: 'users', component: AdminUsersComponent }
];
```
## Route Guards
### CanActivate Guard
```typescript
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';
import { map } from 'rxjs/operators';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(
private authService: AuthService,
private router: Router
) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> {
return this.authService.isAuthenticated$.pipe(
map(isAuth => {
if (isAuth) return true;
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
return false;
})
);
}
}
// Usage
const routes: Routes = [
{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }
];
```
### CanDeactivate Guard
```typescript
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | boolean;
}
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(component: CanComponentDeactivate): Observable<boolean> | boolean {
return component.canDeactivate();
}
}
// Component
@Component({...})
export class FormComponent implements CanComponentDeactivate {
form!: FormGroup;
canDeactivate(): Observable<boolean> | boolean {
return !this.form.dirty || confirm('Discard changes?');
}
}
// Usage
{ path: 'form', component: FormComponent, canDeactivate: [CanDeactivateGuard] }
```
### Resolve Guard
```typescript
@Injectable()
export class UserResolver implements Resolve<User> {
constructor(private userService: UserService) {}
resolve(route: ActivatedRouteSnapshot): Observable<User> {
return this.userService.getUser(route.params['id']);
}
}
// Usage
{
path: 'users/:id',
component: UserDetailComponent,
resolve: { user: UserResolver }
}
// Component receives data
@Component({...})
export class UserDetailComponent {
user!: User;
constructor(private route: ActivatedRoute) {
this.route.data.subscribe(data => {
this.user = data['user'];
});
}
}
```
## Query Parameters
```typescript
// Navigation
this.router.navigate(['/users'], {
queryParams: {
page: 1,
sort: 'name',
filter: 'active'
}
});
// Reading
this.route.queryParams.subscribe(params => {
const page = params['page'];
const sort = params['sort'];
});
// Template
<a [routerLink]="['/users']" [queryParams]="{ page: 2, sort: 'name' }">
Next Page
</a>
```
## Fragment (Hash)
```typescript
// Navigation
this.router.navigate(['/docs'], { fragment: 'section1' });
// Reading
this.route.fragment.subscribe(fragment => {
console.log('Fragment:', fragment);
});
// Template
<a routerLink="/docs" fragment="section1">Section 1</a>
```
## Preloading Strategies
```typescript
// Default: no preloading
RouterModule.forRoot(routes);
// Preload all lazy modules
RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules
});
// Custom preloading strategy
@Injectable()
export class SelectivePreloadingStrategy implements PreloadingStrategy {
preload(route: Route, load: () => Observable<any>): Observable<any> {
if (route.data && route.data['preload']) {
return load();
}
return of(null);
}
}
// Usage
const routes: Routes = [
{ path: 'users', loadChildren: '...', data: { preload: true } }
];
RouterModule.forRoot(routes, {
preloadingStrategy: SelectivePreloadingStrategy
})
```
## Route Reuse Strategy
```typescript
@Injectable()
export class CustomRouteReuseStrategy implements RouteReuseStrategy {
storedRoutes: { [key: string]: RouteData } = {};
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return route.data['cache'] === true;
}
store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {
this.storedRoutes[route.url.join('/')] = { route, handle: detachedTree };
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return !!this.storedRoutes[route.url.join('/')];
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
return this.storedRoutes[route.url.join('/')]?.handle || null;
}
shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
return future.routeConfig === current.routeConfig;
}
}
```
## Performance Optimization
### Code Splitting
```typescript
// Only load admin module when needed
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
}
```
### Change Detection with Routes
```typescript
@Component({
selector: 'app-root',
template: `<router-outlet></router-outlet>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent { }
```
### Scroll Position
```typescript
// Scroll to top on route change
RouterModule.forRoot(routes, {
scrollPositionRestoration: 'top'
})
// Or custom scroll
export class ScrollToTopComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe(() => {
window.scrollTo(0, 0);
});
}
}
```
## Advanced Patterns
### Auxiliary Routes
```typescript
// URL: /users/1(admin:admin-panel)
<router-outlet></router-outlet>
<router-outlet name="admin"></router-outlet>
// Navigation
this.router.navigate([
{ outlets: {
primary: ['users', userId],
admin: ['admin-panel']
}}
]);
```
### Child Routes with Components
```typescript
const routes: Routes = [
{
path: 'dashboard',
component: DashboardComponent,
children: [
{ path: 'stats', component: StatsComponent },
{ path: 'reports', component: ReportsComponent }
]
}
];
// DashboardComponent template
<nav>
<a routerLink="stats" routerLinkActive="active">Stats</a>
<a routerLink="reports" routerLinkActive="active">Reports</a>
</nav>
<router-outlet></router-outlet>
```
## Testing Routes
```typescript
describe('Routing', () => {
let router: Router;
let location: Location;
let fixture: ComponentFixture<AppComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppRoutingModule, AppComponent]
}).compileComponents();
router = TestBed.inject(Router);
location = TestBed.inject(Location);
fixture = TestBed.createComponent(AppComponent);
});
it('should navigate to home', fakeAsync(() => {
router.navigate(['']);
tick();
expect(location.path()).toBe('/');
}));
});
```
## Best Practices
1. **Lazy load features**: Reduce initial bundle size
2. **Use route guards**: Control access and preload data
3. **Implement RouteReuseStrategy**: Cache components when needed
4. **Handle 404s**: Provide meaningful error pages
5. **Query params for filters**: Keep state in URL
6. **Preload strategically**: Balance performance vs initial load
7. **Use fragments for anchors**: Scroll to page sections
## Resources
- [Angular Routing Guide](https://angular.io/guide/router)
- [Route Guards](https://angular.io/guide/router-tutorial-toh)
- [Lazy Loading](https://angular.io/guide/lazy-loading-ngmodules)

339
skills/rxjs/SKILL.md Normal file
View File

@@ -0,0 +1,339 @@
---
name: rxjs-implementation
description: Implement RxJS observables, apply operators, fix memory leaks with unsubscribe patterns, handle errors, create subjects, and build reactive data pipelines in Angular applications.
---
# RxJS Implementation Skill
## Quick Start
### Observable Basics
```typescript
import { Observable } from 'rxjs';
// Create observable
const observable = new Observable((observer) => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
});
// Subscribe
const subscription = observable.subscribe({
next: (value) => console.log(value),
error: (error) => console.error(error),
complete: () => console.log('Done')
});
// Unsubscribe
subscription.unsubscribe();
```
### Common Operators
```typescript
import { map, filter, switchMap, takeUntil } from 'rxjs/operators';
// Transformation
data$.pipe(
map(user => user.name),
filter(name => name.length > 0)
).subscribe(name => console.log(name));
// Higher-order
userId$.pipe(
switchMap(id => this.userService.getUser(id))
).subscribe(user => console.log(user));
```
## Subjects
### Subject Types
```typescript
import { Subject, BehaviorSubject, ReplaySubject } from 'rxjs';
// Subject - No initial value
const subject = new Subject<string>();
subject.next('hello');
// BehaviorSubject - Has initial value
const behavior = new BehaviorSubject<string>('initial');
behavior.next('new value');
// ReplaySubject - Replays N values
const replay = new ReplaySubject<string>(3);
replay.next('one');
replay.next('two');
```
### Service with Subject
```typescript
@Injectable()
export class NotificationService {
private messageSubject = new Subject<string>();
public message$ = this.messageSubject.asObservable();
notify(message: string) {
this.messageSubject.next(message);
}
}
// Usage
constructor(private notification: NotificationService) {
this.notification.message$.subscribe(msg => {
console.log('Notification:', msg);
});
}
```
## Transformation Operators
```typescript
// map - Transform values
source$.pipe(
map(user => user.name)
)
// switchMap - Switch to new observable (cancel previous)
userId$.pipe(
switchMap(id => this.userService.getUser(id))
)
// mergeMap - Merge all results
fileIds$.pipe(
mergeMap(id => this.downloadFile(id))
)
// concatMap - Sequential processing
tasks$.pipe(
concatMap(task => this.processTask(task))
)
// exhaustMap - Ignore new while processing
clicks$.pipe(
exhaustMap(() => this.longRequest())
)
```
## Filtering Operators
```typescript
// filter - Only pass matching values
data$.pipe(
filter(item => item.active)
)
// first - Take first value
data$.pipe(first())
// take - Take N values
data$.pipe(take(5))
// takeUntil - Take until condition
data$.pipe(
takeUntil(this.destroy$)
)
// distinct - Filter duplicates
data$.pipe(
distinct(),
distinctUntilChanged()
)
// debounceTime - Wait N ms
input$.pipe(
debounceTime(300),
distinctUntilChanged()
)
```
## Combination Operators
```typescript
import { combineLatest, merge, concat, zip } from 'rxjs';
// combineLatest - Latest from all
combineLatest([user$, settings$, theme$]).pipe(
map(([user, settings, theme]) => ({ user, settings, theme }))
)
// merge - Values from any
merge(click$, hover$, input$)
// concat - Sequential
concat(request1$, request2$, request3$)
// zip - Wait for all
zip(form1$, form2$, form3$)
// withLatestFrom - Combine with latest
click$.pipe(
withLatestFrom(user$),
map(([click, user]) => ({ click, user }))
)
```
## Error Handling
```typescript
// catchError - Handle errors
data$.pipe(
catchError(error => {
console.error('Error:', error);
return of(defaultValue);
})
)
// retry - Retry on error
request$.pipe(
retry(3),
catchError(error => throwError(error))
)
// timeout - Timeout if no value
request$.pipe(
timeout(5000),
catchError(error => of(null))
)
```
## Memory Leak Prevention
### Unsubscribe Pattern
```typescript
private destroy$ = new Subject<void>();
ngOnInit() {
this.data$.pipe(
takeUntil(this.destroy$)
).subscribe(data => {
this.processData(data);
});
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
```
### Async Pipe (Preferred)
```typescript
// Component
export class UserComponent {
user$ = this.userService.getUser(1);
constructor(private userService: UserService) {}
}
// Template - Async pipe handles unsubscribe
<div>{{ user$ | async as user }}
<p>{{ user.name }}</p>
</div>
```
## Advanced Patterns
### Share Operator
```typescript
// Hot observable - Share single subscription
readonly users$ = this.http.get('/api/users').pipe(
shareReplay(1) // Cache last result
);
// Now multiple subscriptions use same HTTP request
this.users$.subscribe(users => {...});
this.users$.subscribe(users => {...}); // Reuses cached
```
### Scan for State
```typescript
// Accumulate state
const counter$ = clicks$.pipe(
scan((count) => count + 1, 0)
)
// Complex state
const appState$ = actions$.pipe(
scan((state, action) => {
switch(action.type) {
case 'ADD_USER': return { ...state, users: [...state.users, action.user] };
case 'DELETE_USER': return { ...state, users: state.users.filter(u => u.id !== action.id) };
default: return state;
}
}, initialState)
)
```
### Forkjoin for Multiple Requests
```typescript
// Parallel requests
forkJoin({
users: this.userService.getUsers(),
settings: this.settingService.getSettings(),
themes: this.themeService.getThemes()
}).subscribe(({ users, settings, themes }) => {
console.log('All loaded:', users, settings, themes);
})
```
## Testing Observables
```typescript
import { marbles } from 'rxjs-marbles';
it('should map values correctly', marbles((m) => {
const source = m.hot('a-b-|', { a: 1, b: 2 });
const expected = m.cold('x-y-|', { x: 2, y: 4 });
const result = source.pipe(
map(x => x * 2)
);
m.expect(result).toBeObservable(expected);
}));
```
## Best Practices
1. **Always unsubscribe**: Use takeUntil or async pipe
2. **Use higher-order operators**: switchMap, mergeMap, etc.
3. **Avoid nested subscriptions**: Use operators instead
4. **Share subscriptions**: Use share/shareReplay for expensive operations
5. **Handle errors**: Always include catchError
6. **Type your observables**: `Observable<User>` not just `Observable`
## Common Mistakes to Avoid
```typescript
// ❌ Wrong - Creates multiple subscriptions
this.data$.subscribe(d => {
this.data$.subscribe(d2 => {
// nested subscriptions!
});
});
// ✅ Correct - Use switchMap
this.data$.pipe(
switchMap(d => this.otherService.fetch(d))
).subscribe(result => {
// handled
});
// ❌ Wrong - Memory leak
ngOnInit() {
this.data$.subscribe(data => this.data = data);
}
// ✅ Correct - Unsubscribe or async
ngOnInit() {
this.data$ = this.service.getData();
}
// In template: {{ data$ | async }}
```
## Resources
- [RxJS Documentation](https://rxjs.dev/)
- [Interactive Diagrams](https://rxmarbles.com/)
- [RxJS Operators](https://rxjs.dev/api)

470
skills/state-management/SKILL.md Normal file
View File

@@ -0,0 +1,470 @@
---
name: state-implementation
description: Implement NgRx store with actions and reducers, build selectors, create effects for async operations, configure entity adapters, and integrate HTTP APIs with state management.
---
# State Implementation Skill
## Quick Start
### Simple Service-Based State
```typescript
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class UserStore {
private usersSubject = new BehaviorSubject<User[]>([]);
users$ = this.usersSubject.asObservable();
constructor(private http: HttpClient) {}
loadUsers() {
this.http.get<User[]>('/api/users').subscribe(
users => this.usersSubject.next(users)
);
}
addUser(user: User) {
this.http.post<User>('/api/users', user).subscribe(
newUser => {
const current = this.usersSubject.value;
this.usersSubject.next([...current, newUser]);
}
);
}
}
// Usage
export class UserListComponent {
users$ = this.userStore.users$;
constructor(private userStore: UserStore) {}
}
```
### NgRx Basics
```typescript
// 1. Define actions
export const loadUsers = createAction('[User] Load Users');
export const loadUsersSuccess = createAction(
'[User] Load Users Success',
props<{ users: User[] }>()
);
export const loadUsersError = createAction(
'[User] Load Users Error',
props<{ error: string }>()
);
// 2. Create reducer
const initialState: UserState = { users: [], loading: false };
export const userReducer = createReducer(
initialState,
on(loadUsers, state => ({ ...state, loading: true })),
on(loadUsersSuccess, (state, { users }) => ({
...state,
users,
loading: false
})),
on(loadUsersError, (state, { error }) => ({
...state,
error,
loading: false
}))
);
// 3. Create effect
@Injectable()
export class UserEffects {
loadUsers$ = createEffect(() =>
this.actions$.pipe(
ofType(loadUsers),
switchMap(() =>
this.userService.getUsers().pipe(
map(users => loadUsersSuccess({ users })),
catchError(error => of(loadUsersError({ error })))
)
)
)
);
constructor(
private actions$: Actions,
private userService: UserService
) {}
}
// 4. Use in component
@Component({...})
export class UserListComponent {
users$ = this.store.select(selectUsers);
loading$ = this.store.select(selectLoading);
constructor(private store: Store) {
this.store.dispatch(loadUsers());
}
}
```
## NgRx Core Concepts
### Store
```typescript
// Dispatch action
this.store.dispatch(loadUsers());
// Select state
this.store.select(selectUsers).subscribe(users => {
console.log(users);
});
// Select with observable
this.users$ = this.store.select(selectUsers);
// Multiple selects
this.store.select(selectUsers, selectLoading).subscribe(([users, loading]) => {
// ...
});
```
### Selectors
```typescript
// Feature selector
export const selectUserState = createFeatureSelector<UserState>('users');
// Select from feature
export const selectUsers = createSelector(
selectUserState,
state => state.users
);
// Selector composition
export const selectActiveUsers = createSelector(
selectUsers,
users => users.filter(u => u.active)
);
// Memoized selector
export const selectUserById = (id: number) => createSelector(
selectUsers,
users => users.find(u => u.id === id)
);
// With props
export const selectUsersByRole = createSelector(
selectUsers,
(users: User[], { role }: { role: string }) =>
users.filter(u => u.role === role)
);
// Usage with props
this.store.select(selectUsersByRole, { role: 'admin' });
```
### Effects
```typescript
// Side effect - HTTP call
@Injectable()
export class UserEffects {
loadUsers$ = createEffect(() =>
this.actions$.pipe(
ofType(UserActions.loadUsers),
switchMap(() =>
this.userService.getUsers().pipe(
map(users => UserActions.loadUsersSuccess({ users })),
catchError(error => of(UserActions.loadUsersError({ error })))
)
)
)
);
// Non-dispatching effect
logActions$ = createEffect(
() => this.actions$.pipe(
tap(action => console.log(action))
),
{ dispatch: false }
);
constructor(
private actions$: Actions,
private userService: UserService
) {}
}
```
## Entity Adapter
### Setup
```typescript
export interface User {
id: number;
name: string;
email: string;
}
export const adapter = createEntityAdapter<User>({
selectId: (user: User) => user.id,
sortComparer: (a: User, b: User) => a.name.localeCompare(b.name)
});
export interface UserState extends EntityState<User> {
loading: boolean;
error: string | null;
}
const initialState = adapter.getInitialState({
loading: false,
error: null
});
```
### Reducer with Adapter
```typescript
export const userReducer = createReducer(
initialState,
on(loadUsers, state => ({ ...state, loading: true })),
on(loadUsersSuccess, (state, { users }) =>
adapter.setAll(users, { ...state, loading: false })
),
on(addUserSuccess, (state, { user }) =>
adapter.addOne(user, state)
),
on(updateUserSuccess, (state, { user }) =>
adapter.updateOne({ id: user.id, changes: user }, state)
),
on(deleteUserSuccess, (state, { id }) =>
adapter.removeOne(id, state)
)
);
// Export selectors
export const {
selectIds,
selectEntities,
selectAll,
selectTotal
} = adapter.getSelectors(selectUserState);
```
## Facade Pattern
```typescript
@Injectable()
export class UserFacade {
users$ = this.store.select(selectAllUsers);
loading$ = this.store.select(selectUsersLoading);
error$ = this.store.select(selectUsersError);
constructor(private store: Store) {}
loadUsers() {
this.store.dispatch(loadUsers());
}
addUser(user: User) {
this.store.dispatch(addUser({ user }));
}
updateUser(id: number, changes: Partial<User>) {
this.store.dispatch(updateUser({ id, changes }));
}
deleteUser(id: number) {
this.store.dispatch(deleteUser({ id }));
}
}
// Component usage simplified
@Component({...})
export class UserListComponent {
users$ = this.userFacade.users$;
loading$ = this.userFacade.loading$;
constructor(private userFacade: UserFacade) {
this.userFacade.loadUsers();
}
}
```
## Angular Signals
```typescript
import { signal, computed, effect } from '@angular/core';
// Create signal
const count = signal(0);
// Read value
console.log(count()); // 0
// Update value
count.set(1);
count.update(c => c + 1);
// Computed value
const doubled = computed(() => count() * 2);
// Effect
effect(() => {
console.log(`Count is ${count()}`);
console.log(`Doubled is ${doubled()}`);
});
// Signal-based state
@Component({...})
export class CounterComponent {
count = signal(0);
doubled = computed(() => this.count() * 2);
increment() {
this.count.update(c => c + 1);
}
}
```
## HTTP Integration
### HttpClient with Interceptor
```typescript
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private authService: AuthService) {}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = this.authService.getToken();
const authReq = req.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
return next.handle(authReq);
}
}
// Register
@NgModule({
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
}
]
})
export class AppModule { }
```
### Caching Strategy
```typescript
@Injectable()
export class CachingService {
private cache = new Map<string, any>();
get<T>(key: string, request: Observable<T>, ttl: number = 3600000): Observable<T> {
if (this.cache.has(key)) {
return of(this.cache.get(key));
}
return request.pipe(
tap(data => {
this.cache.set(key, data);
setTimeout(() => this.cache.delete(key), ttl);
})
);
}
}
// Usage
getUsers() {
return this.caching.get(
'users',
this.http.get<User[]>('/api/users'),
5 * 60 * 1000 // 5 minutes
);
}
```
## Testing State
```typescript
describe('User Store', () => {
let store: MockStore;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [StoreModule.forRoot({ users: userReducer })]
});
store = TestBed.inject(Store) as MockStore;
});
it('should load users', () => {
const action = loadUsers();
const completion = loadUsersSuccess({ users: mockUsers });
const effect$ = new UserEffects(
hot('a', { a: action }),
mockUserService
).loadUsers$;
const result = cold('b', { b: completion });
expect(effect$).toBeObservable(result);
});
it('should select users', (done) => {
store.setState({ users: { users: mockUsers } });
store.select(selectUsers).subscribe(users => {
expect(users).toEqual(mockUsers);
done();
});
});
});
```
## Best Practices
1. **Normalize State**: Flat structure, avoid nesting
2. **Single Responsibility**: Each reducer handles one feature
3. **Use Facades**: Simplify component-store interaction
4. **Memoize Selectors**: Prevent unnecessary recalculations
5. **Handle Errors**: Always include error states
6. **Lazy Load Stores**: Register feature stores when needed
7. **Time-Travel Debugging**: Use Redux DevTools
## Advanced Patterns
### Composition Pattern
```typescript
// Combine multiple stores
@Injectable()
export class AppFacade {
users$ = this.userFacade.users$;
products$ = this.productFacade.products$;
cart$ = this.cartFacade.cart$;
constructor(
private userFacade: UserFacade,
private productFacade: ProductFacade,
private cartFacade: CartFacade
) {}
}
```
### Feature Flags
```typescript
export const selectFeatureFlags = createFeatureSelector<FeatureFlags>('features');
export const selectFeatureEnabled = (feature: string) => createSelector(
selectFeatureFlags,
flags => flags[feature]?.enabled ?? false
);
// Component
<div *ngIf="featureEnabled$ | async">New Feature</div>
```
## Resources
- [NgRx Documentation](https://ngrx.io/)
- [Entity Adapter](https://ngrx.io/guide/entity)
- [DevTools](https://github.com/reduxjs/redux-devtools-extension)

480
skills/testing/SKILL.md Normal file
View File

@@ -0,0 +1,480 @@
---
name: testing-deployment-implementation
description: Write unit tests for components and services, implement E2E tests with Cypress, set up test mocks, optimize production builds, configure CI/CD pipelines, and deploy to production platforms.
---
# Testing & Deployment Implementation Skill
## Unit Testing Basics
### TestBed Setup
```typescript
import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
describe('UserService', () => {
let service: UserService;
let httpMock: HttpTestingController;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule],
providers: [UserService]
});
service = TestBed.inject(UserService);
httpMock = TestBed.inject(HttpTestingController);
});
afterEach(() => {
httpMock.verify();
});
});
```
### Component Testing
```typescript
describe('UserListComponent', () => {
let component: UserListComponent;
let fixture: ComponentFixture<UserListComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [UserListComponent],
imports: [CommonModule, HttpClientTestingModule],
providers: [UserService]
}).compileComponents();
fixture = TestBed.createComponent(UserListComponent);
component = fixture.componentInstance;
});
it('should display users', () => {
const mockUsers: User[] = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' }
];
component.users = mockUsers;
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
const userElements = compiled.querySelectorAll('.user-item');
expect(userElements.length).toBe(2);
});
it('should call service on init', () => {
const userService = TestBed.inject(UserService);
spyOn(userService, 'getUsers').and.returnValue(of([]));
component.ngOnInit();
expect(userService.getUsers).toHaveBeenCalled();
});
});
```
### Testing Async Operations
```typescript
// Using fakeAsync and tick
it('should load users after delay', fakeAsync(() => {
const userService = TestBed.inject(UserService);
spyOn(userService, 'getUsers').and.returnValue(
of([{ id: 1, name: 'John' }]).pipe(delay(1000))
);
component.ngOnInit();
expect(component.users.length).toBe(0);
tick(1000);
expect(component.users.length).toBe(1);
}));
// Using waitForAsync
it('should handle async operations', waitForAsync(() => {
const userService = TestBed.inject(UserService);
spyOn(userService, 'getUsers').and.returnValue(
of([{ id: 1, name: 'John' }])
);
component.ngOnInit();
fixture.whenStable().then(() => {
expect(component.users.length).toBe(1);
});
}));
```
## Mocking Services
### HTTP Mocking
```typescript
it('should fetch users from API', () => {
const mockUsers: User[] = [{ id: 1, name: 'John' }];
service.getUsers().subscribe(users => {
expect(users.length).toBe(1);
expect(users[0].name).toBe('John');
});
const req = httpMock.expectOne('/api/users');
expect(req.request.method).toBe('GET');
req.flush(mockUsers);
});
// POST with error handling
it('should handle errors', () => {
service.createUser({ name: 'Jane' }).subscribe(
() => fail('should not succeed'),
(error) => expect(error.status).toBe(400)
);
const req = httpMock.expectOne('/api/users');
req.flush('Invalid user', { status: 400, statusText: 'Bad Request' });
});
```
### Service Mocking
```typescript
class MockUserService {
getUsers() {
return of([
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' }
]);
}
}
@Component({
selector: 'app-test',
template: '<div>{{ (users$ | async)?.length }}</div>'
})
class TestComponent {
users$ = this.userService.getUsers();
constructor(private userService: UserService) {}
}
describe('TestComponent with Mock', () => {
let component: TestComponent;
let fixture: ComponentFixture<TestComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [TestComponent],
providers: [
{ provide: UserService, useClass: MockUserService }
]
}).compileComponents();
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should render users', () => {
const div = fixture.nativeElement.querySelector('div');
expect(div.textContent).toContain('2');
});
});
```
## E2E Testing with Cypress
### Basic E2E Test
```typescript
describe('User List Page', () => {
beforeEach(() => {
cy.visit('/users');
});
it('should display user list', () => {
cy.get('[data-testid="user-item"]')
.should('have.length', 10);
});
it('should filter users by name', () => {
cy.get('[data-testid="search-input"]')
.type('John');
cy.get('[data-testid="user-item"]')
.should('have.length', 1)
.should('contain', 'John');
});
it('should navigate to user detail', () => {
cy.get('[data-testid="user-item"]').first().click();
cy.location('pathname').should('include', '/users/');
cy.get('[data-testid="user-detail"]').should('be.visible');
});
});
```
### Page Object Model
```typescript
// user.po.ts
export class UserPage {
navigateTo(path: string = '/users') {
cy.visit(path);
return this;
}
getUsers() {
return cy.get('[data-testid="user-item"]');
}
getUserByName(name: string) {
return cy.get('[data-testid="user-item"]').contains(name);
}
clickUser(index: number) {
this.getUsers().eq(index).click();
return this;
}
searchUser(query: string) {
cy.get('[data-testid="search-input"]').type(query);
return this;
}
}
// Test using PO
describe('User Page', () => {
const page = new UserPage();
beforeEach(() => {
page.navigateTo();
});
it('should find user by name', () => {
page.searchUser('John');
page.getUsers().should('have.length', 1);
});
});
```
## Build Optimization
### AOT Compilation
```typescript
// angular.json
{
"projects": {
"app": {
"architect": {
"build": {
"options": {
"aot": true,
"outputHashing": "all",
"sourceMap": false,
"optimization": true,
"buildOptimizer": true,
"namedChunks": false
}
}
}
}
}
}
```
### Bundle Analysis
```bash
# Install webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
# Run analysis
ng build --stats-json
webpack-bundle-analyzer dist/app/stats.json
```
### Code Splitting
```typescript
// app-routing.module.ts
const routes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'admin',
loadChildren: () =>
import('./admin/admin.module').then(m => m.AdminModule)
},
{
path: 'users',
loadChildren: () =>
import('./users/users.module').then(m => m.UsersModule)
}
];
```
## Deployment
### Production Build
```bash
# Build for production
ng build --configuration production
# Output directory
dist/app/
# Serve locally
npx http-server dist/app/
```
### Deployment Targets
**Firebase:**
```bash
npm install -g firebase-tools
firebase login
firebase init hosting
firebase deploy
```
**Netlify:**
```bash
npm run build
# Drag and drop dist/ folder to Netlify
# Or use CLI:
npm install -g netlify-cli
netlify deploy --prod --dir=dist/app
```
**GitHub Pages:**
```bash
ng build --output-path docs --base-href /repo-name/
git add docs/
git commit -m "Deploy to GitHub Pages"
git push
# Enable in repository settings
```
**Docker:**
```dockerfile
# Build stage
FROM node:18 as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
# Serve stage
FROM nginx:alpine
COPY --from=build /app/dist/app /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```
## CI/CD Pipelines
### GitHub Actions
```yaml
name: CI/CD
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
build-and-test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install dependencies
run: npm ci
- name: Lint
run: npm run lint
- name: Build
run: npm run build
- name: Test
run: npm run test -- --watch=false --code-coverage
- name: E2E Test
run: npm run e2e
- name: Upload coverage
uses: codecov/codecov-action@v3
with:
files: ./coverage/lcov.info
- name: Deploy
if: github.ref == 'refs/heads/main'
run: npm run deploy
```
## Performance Monitoring
### Core Web Vitals
```typescript
// Using web-vitals library
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getFCP(console.log);
getLCP(console.log);
getTTFB(console.log);
```
### Error Tracking (Sentry)
```typescript
import * as Sentry from "@sentry/angular";
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
integrations: [
new Sentry.BrowserTracing(),
new Sentry.Replay(),
],
tracesSampleRate: 1.0,
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
});
@NgModule({
providers: [
{
provide: ErrorHandler,
useValue: Sentry.createErrorHandler(),
},
],
})
export class AppModule {}
```
## Testing Best Practices
1. **Arrange-Act-Assert**: Clear test structure
2. **One Assertion per Test**: Keep tests focused
3. **Test Behavior**: Not implementation details
4. **Use Page Objects**: For E2E tests
5. **Mock External Dependencies**: Services, HTTP
6. **Test Error Cases**: Invalid input, failures
7. **Aim for 80% Coverage**: Don't obsess over 100%
## Coverage Report
```bash
# Generate coverage report
ng test --code-coverage
# View report
open coverage/index.html
```
## Resources
- [Jasmine Documentation](https://jasmine.github.io/)
- [Angular Testing Guide](https://angular.io/guide/testing)
- [Cypress Documentation](https://docs.cypress.io/)
- [Testing Best Practices](https://angular.io/guide/testing-best-practices)

251
skills/typescript/SKILL.md Normal file
View File

@@ -0,0 +1,251 @@
---
name: typescript-implementation
description: Implement TypeScript patterns, convert JavaScript to TypeScript, add type annotations, create generics, implement decorators, and enforce strict type safety in Angular projects.
---
# TypeScript Implementation Skill
## Quick Start
### Basic Types
```typescript
// Primitive types
let name: string = "Angular";
let version: number = 18;
let active: boolean = true;
// Union types
let id: string | number;
// Type aliases
type User = {
name: string;
age: number;
};
```
### Interfaces and Generics
```typescript
interface Component {
render(): string;
}
// Generic interface
interface Repository<T> {
getAll(): T[];
getById(id: number): T | undefined;
}
class UserRepository implements Repository<User> {
getAll(): User[] { /* ... */ }
getById(id: number): User | undefined { /* ... */ }
}
```
### Decorators (Essential for Angular)
```typescript
// Class decorator
function Component(config: any) {
return function(target: any) {
target.prototype.selector = config.selector;
};
}
// Method decorator
function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`Calling ${propertyKey} with:`, args);
return originalMethod.apply(this, args);
};
return descriptor;
}
// Parameter decorator
function Required(target: any, propertyKey: string, parameterIndex: number) {
// Validation logic
}
```
## Essential Concepts
### Advanced Types
**Utility Types:**
- `Partial<T>` - Make all properties optional
- `Required<T>` - Make all properties required
- `Readonly<T>` - Make all properties readonly
- `Record<K, T>` - Object with specific key types
- `Pick<T, K>` - Select specific properties
- `Omit<T, K>` - Exclude specific properties
**Conditional Types:**
```typescript
type IsString<T> = T extends string ? true : false;
type A = IsString<"hello">; // true
type B = IsString<number>; // false
```
**Mapped Types:**
```typescript
type Getters<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
```
### Generic Constraints
```typescript
// Extend constraint
function processUser<T extends User>(user: T) {
console.log(user.name); // OK, T has 'name'
}
// Keyof constraint
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
```
## Advanced Features
### Type Guards
```typescript
// Type predicate
function isUser(value: unknown): value is User {
return typeof value === 'object' && value !== null && 'name' in value;
}
// Discriminated unions
type Shape =
| { kind: 'circle'; radius: number }
| { kind: 'square'; side: number };
function getArea(shape: Shape) {
switch (shape.kind) {
case 'circle': return Math.PI * shape.radius ** 2;
case 'square': return shape.side ** 2;
}
}
```
### Module System
```typescript
// Export
export interface User { name: string; }
export const API_URL = 'https://api.example.com';
// Import
import { User, API_URL } from './types';
import * as Types from './types'; // Namespace import
```
## Async Programming
```typescript
// Promises
async function fetchUser(): Promise<User> {
const response = await fetch('/api/users/1');
return response.json();
}
// Error handling
async function safeRequest() {
try {
const result = await fetchUser();
} catch (error) {
console.error('Request failed:', error);
}
}
```
## Best Practices
1. **Avoid `any`**: Use `unknown` and type guards instead
2. **Use strict mode**: Enable `strict` in tsconfig.json
3. **Leverage utility types**: Reduce code duplication
4. **Document complex types**: Use JSDoc for clarity
5. **Test type definitions**: Use type-level tests
## Common Patterns
### Result Type Pattern
```typescript
type Result<T, E> =
| { ok: true; value: T }
| { ok: false; error: E };
function createUser(data: any): Result<User, string> {
try {
// validation and creation
return { ok: true, value: user };
} catch (e) {
return { ok: false, error: e.message };
}
}
```
### Builder Pattern
```typescript
class QueryBuilder<T> {
private query: any = {};
where(field: keyof T, value: any): this {
this.query[field] = value;
return this;
}
build() {
return this.query;
}
}
```
## Real-World Angular Examples
### Service Type Safety
```typescript
@Injectable()
export class UserService {
constructor(private http: HttpClient) {}
getUser(id: number): Observable<User> {
return this.http.get<User>(`/api/users/${id}`);
}
}
```
### Component Props
```typescript
interface ComponentProps {
title: string;
items: Item[];
onSelect: (item: Item) => void;
}
@Component({
selector: 'app-list',
template: `...`
})
export class ListComponent implements ComponentProps {
@Input() title!: string;
@Input() items: Item[] = [];
@Output() itemSelected = new EventEmitter<Item>();
onSelect(item: Item) {
this.itemSelected.emit(item);
}
}
```
## Performance Tips
- Use `const` assertions for literal types
- Leverage structural typing for flexibility
- Use discriminated unions for safe pattern matching
- Avoid circular type dependencies
- Use `omit` to reduce property access
## Resources
- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
- [Advanced Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html)
- [TypeScript Playground](https://www.typescriptlang.org/play)