Migrate

Angular 22+ Migration: $ARGUMENTS

If $ARGUMENTS is empty, ask the user for a component path or folder before proceeding.

Phase 1: Analyze

Read all files in the target path. For each component, directive, or service, scan for migration items below. If a folder is given, process all .ts and .html files within it.

What to migrate

Inputs / Outputs / Models:

• @Input() → input() or input.required()
• @Input() with setter → input() + linkedSignal() (preferred) or effect() (only for DOM side effects)
• @Input() + @Output() pair (e.g. value / valueChange) → model()
• @Output() → output()
• Boolean inputs: add { transform: booleanAttribute }
• Number inputs: add { transform: numberAttribute }

Host bindings:

• @HostBinding('class.x') → host: { '[class.x]': 'expr()' }
• @HostBinding('attr.x') → host: { '[attr.x]': 'expr()' }
• @HostBinding('style.x') → host: { '[style.x]': 'expr()' }
• @HostListener('event') → host: { '(event)': 'handler($event)' }

Queries:

• @ViewChild() → viewChild() or viewChild.required()
• @ViewChildren() → viewChildren()
• @ContentChild() → contentChild()
• @ContentChildren() → contentChildren()

Template syntax:

• *ngIf → @if
• *ngFor → @for (requires track expression)
• *ngSwitch / *ngSwitchCase → @switch / @case

State management:

• BehaviorSubject used for local component state → signal()
• BehaviorSubject + combineLatest → computed()
• Subject<void> used only to trigger side effects → effect()
• effect() that only calls signal.set() for derived state → computed() or linkedSignal
• Redundant markForCheck() after signal updates → remove
• Object/array mutation in place + signal.set() with same ref → immutable update with signal.update()

CSS class building:

• CssClassBuilder + @applyCssClass → computed() returning class string + host: { '[class]': '_cssClass()' }

Cleanup patterns:

• Custom DestroyedService → DestroyRef + takeUntilDestroyed()
• ngOnDestroy only for destroy$.next() → remove entirely after migration

Decorator cleanup:

• Remove standalone: true (default since Angular 19)
• Remove allowSignalWrites option in effect() (the option no longer exists)

Imports:

• Deprecated *Module classes → individual component/directive imports

Member ordering (ESLint enforced):

1. Decorated properties (any remaining @Input, @Output, @ViewChild)
2. Signal inputs/outputs (input(), output(), model())
3. Public → Protected → Private fields
4. Constructor
5. Public → Protected → Private methods

What NOT to migrate

Do NOT convert these — they should stay as-is:

• RxJS for async operations: HTTP calls, WebSocket streams, timers, interval-based logic → keep as Observable
• BehaviorSubject with complex operators: switchMap, debounceTime, distinctUntilChanged, combineLatest with async sources → keep as RxJS
• Plain properties with no reactive consumer: If nothing in template, host binding, computed, or effect reads it → keep as plain property, do not wrap in signal()
• Signals for internal bookkeeping: One-time flags, cached DOM measurements, counters with no reactive consumer → use plain property

Migration is optional for existing code

The migration targets are recommendations, not mandatory fixes. Present all findings but let the user decide scope. Existing @Input() / @Output() decorators are valid — only migrate them if the user wants to or if the code is being substantially reworked.

Phase 2: Present Plan

Output a structured migration plan:

## Migration Plan: [component name]

### Files affected
- path/to/component.ts
- path/to/component.html
- path/to/component.spec.ts

### Inputs / Outputs
| Current | Migration | Notes |
|---------|-----------|-------|
| `@Input() label: string` | `readonly label = input<string>('')` | |
| `@Input() disabled: boolean` | `readonly disabled = input(false, { transform: booleanAttribute })` | |
| `@Input() value` + `@Output() valueChange` | `readonly value = model<T>()` | Two-way binding |

### Host Bindings
| Current | Migration |
|---------|-----------|
| `@HostBinding('class.is-open')` | `host: { '[class.is-open]': 'isOpen()' }` |

### Template Changes
| Current | Migration |
|---------|-----------|
| `*ngIf="condition"` | `@if (condition) { ... }` |
| `*ngFor="let item of items"` | `@for (item of items; track item.id) { ... }` |

### State Management
| Current | Migration | Reason |
|---------|-----------|--------|
| `BehaviorSubject<boolean>` | `signal(false)` | Local state, no async consumers |

### Skipped (intentionally not migrated)
| Item | Reason |
|------|--------|
| `httpData$` Observable | Async HTTP stream |

### Test Updates
- [ ] Replace `component.input = value` with `fixture.componentRef.setInput('input', value)`
- [ ] Update module imports to individual components
- [ ] Verify existing tests still pass after migration

### Docs Updates
- [ ] Update examples if public API changed (input names, usage patterns)
- [ ] Ensure examples use individual imports, not deprecated modules

### Breaking Changes
- [ ] List any renamed/removed inputs or outputs
- [ ] Draft BREAKING CHANGE footer if needed

Stop here and wait for approval before proceeding.

Phase 3: Execute

After approval:

1. Apply all migrations from the approved plan
2. Format code: yarn format
3. Run build: nx run <library>:build
4. Run lint: nx run <library>:lint
5. Run tests: nx run <library>:test --testfile=<spec-file> --skip-nx-cache
6. Report results and any issues