angular-17listed
Install: claude install-skill Claudient/Claudient
# Angular 17+
## When to activate
- Building or maintaining Angular 17+ applications
- Migrating from NgModule-based components to standalone components
- Implementing reactive state with Signals or NgRx
- Optimizing RxJS operators in service or effect code
- Configuring lazy loading with `loadComponent` routing
- Applying OnPush change detection with the async pipe
## When NOT to use
- React, Vue, or Svelte projects where Angular idioms do not apply
- Angular.js (Angular 1.x) — fundamentally different framework
- Angular versions below 14 where standalone components do not exist
## Instructions
### Standalone Component Migration
Standalone components declare their own imports instead of relying on an NgModule. New Angular 17+ projects use standalone by default.
```typescript
// Before (NgModule-based)
@Component({
selector: 'app-user-card',
templateUrl: './user-card.component.html',
})
export class UserCardComponent {}
@NgModule({
declarations: [UserCardComponent],
imports: [CommonModule, RouterModule],
exports: [UserCardComponent],
})
export class SharedModule {}
```
```typescript
// After (standalone)
@Component({
selector: 'app-user-card',
standalone: true,
imports: [CommonModule, RouterModule],
templateUrl: './user-card.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserCardComponent {
@Input() user!: User;
}
```
Bootstrap a standalone application:
```typescript
// main.ts
bootstrapApplication(AppComponen