Orqestria Download
← Back to Web app developers

Skill · Version 1.0.0

Incremental Angular refactoring

Improves Angular structure in verified steps while respecting existing modules, standalone components and supported dependency versions.

angular-refactoring-migrations

Team members using this skill

See how it helps

When is it useful?

Use when simplifying an Angular feature or carrying out an explicitly scoped upgrade.

What does it help you do?

  • Extracts calculations, data services and focused components around existing behavior.
  • Keeps standalone and NgModule boundaries valid without unrelated mass conversions.
  • Checks peer dependencies and verifies builds, templates and tests after migration steps.

Try asking this

Refactor our oversized customer component into smaller parts, preserving behavior and documenting any required Angular or RxJS compatibility changes. Keep a before-and-after check of selection, saving and error display. Extract one responsibility at a time so a regression has a clear origin.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

Angular Refactoring & Migrations

Refactor Angular codebases in small, behavior-preserving steps without mixing broad architectural migrations into unrelated feature or bugfix work.

1. Incremental refactoring boundaries

  • Keep refactoring scoped to the task at hand. Before changing structure, ensure existing tests pass (or add characterization tests around the user flow).
  • Untangle fat components step by step:
    1. Extract pure calculations into computed() signals, pure pipes or helper functions.
    2. Extract HTTP calls and data transformation into a typed domain/data service.
    3. Extract complex local coordination or multi-stream state into a component-scoped facade/service.
    4. Split self-contained UI sections into focused child components with explicit inputs and outputs.

2. Bridging NgModule and standalone code safely

  • In hybrid codebases, respect the existing module boundaries:
    • A standalone component can be imported into an @NgModule's imports: [...] array (never declarations).
    • An @NgModule-declared component can be used by importing its exporting module into a standalone component's imports: [...].
  • Never convert an entire feature module to standalone, @if/@for control flow, or Signals inside a targeted bugfix or feature PR unless explicitly requested.

3. Safe Angular and RxJS upgrades (when tasked with an upgrade)

  • Check package.json peer dependencies (@angular/*, typescript, rxjs, zone.js, @angular/material, @ngrx/*) and use official Angular CLI schematics (ng update / ng generate @angular/core:...) where applicable.
  • Replace deprecated RxJS signatures (such as toPromise() -> firstValueFrom/lastValueFrom, positional subscribe(next, error, complete) -> observer object) and verify build, template typecheck and tests after each step.

Before you finish

  • Every refactoring step preserves observable behavior and passes template typecheck and tests.
  • Standalone and NgModule imports/declarations remain valid without unsolicited mass conversion.
  • Breaking changes, schematic steps or peer-dependency requirements are documented clearly.

Included files 2

  • LICENSE.txt
  • SKILL.md