Back to Angular

Automatic Migrations & Code Modernization

skills/dev-skills/angular-developer/references/migrations.md

22.0.0-next.122.0 KB
Original Source

Automatic Migrations & Code Modernization

When tasked with refactoring or modernizing an existing codebase, always prefer using the official automated schematics available in @angular/core over manual text replacement.

Discovering Migrations

To view all available schematics for the installed version of the core framework, run: ng generate @angular/core: --help

Common Migration Schematics

Use the following commands to apply specific syntax updates. You can scope these commands to a specific project or directory using the --project <name> or --path <dir> flags.

Feature to ModernizeCommand to Execute
Built-in Control Flowng generate @angular/core:control-flow
Signal-based Inputsng generate @angular/core:signal-input-migration
Signal Queriesng generate @angular/core:signal-queries-migration
Functional Outputsng generate @angular/core:output-migration
inject() Functionng generate @angular/core:inject
Self-Closing Tagsng generate @angular/core:self-closing-tag
Standaloneng generate @angular/core:standalone (See workflow below)

Specialized Workflow: Migrating to Standalone

The Standalone migration is an interactive, multi-step refactoring. You MUST perform this in three discrete stages, verifying that the application builds and runs correctly after each stage completes:

  1. Phase 1: Run ng generate @angular/core:standalone and select the option to Convert all components, directives, and pipes to standalone.
  2. Phase 2: Verify the build with ng build. Run the command again and select Remove unnecessary NgModule classes.
  3. Phase 3: Verify the build with ng build. Run the final pass and select Bootstrap the project using standalone APIs.