← Zurück zu Ada
AgentAda
Angular schrittweise umstrukturieren
Verbessert Angular-Strukturen in überprüften Schritten unter Beachtung bestehender Module und unterstützter Paketversionen.
angular-refactoring-migrations
Entdecke, wie der Skill hilftWann ist der Skill hilfreich?
Nutze diesen Skill beim Vereinfachen einer Funktion oder bei einem gezielt beauftragten Upgrade.
Wobei hilft er dir?
- Extrahiert Berechnungen, Datendienste und Komponenten bei erhaltenem Verhalten.
- Bewahrt gültige Grenzen zwischen Standalone-Komponenten und NgModules.
- Prüft Abhängigkeiten, Builds, Templates und Tests nach Migrationsschritten.
Das könntest du fragen
Zerlege unsere große Kundenkomponente ohne Verhaltensänderung und dokumentiere erforderliche Angular- oder RxJS-Anpassungen. Vergleiche Auswahl, Speichern und Fehleranzeige vor und nach dem Umbau. Extrahiere jeweils eine Verantwortung, damit eine Regression klar zugeordnet werden kann.
Ausführliche Dokumentation
Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.
Weniger anzeigen
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:
- Extract pure calculations into
computed()signals, pure pipes or helper functions. - Extract HTTP calls and data transformation into a typed domain/data service.
- Extract complex local coordination or multi-stream state into a component-scoped facade/service.
- Split self-contained UI sections into focused child components with explicit inputs and outputs.
- Extract pure calculations into
2. Bridging NgModule and standalone code safely
- In hybrid codebases, respect the existing module boundaries:
- A standalone component can be imported into an
@NgModule'simports: [...]array (neverdeclarations). - An
@NgModule-declared component can be used by importing its exporting module into a standalone component'simports: [...].
- A standalone component can be imported into an
- Never convert an entire feature module to standalone,
@if/@forcontrol 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.jsonpeer 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, positionalsubscribe(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
NgModuleimports/declarations remain valid without unsolicited mass conversion. - Breaking changes, schematic steps or peer-dependency requirements are documented clearly.
Enthaltene Dateien 2
LICENSE.txtSKILL.md
