mirror of
https://github.com/angular/skills.git
synced 2026-09-14 16:13:23 +08:00
2.0 KiB
2.0 KiB
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 Modernize | Command to Execute |
|---|---|
| Built-in Control Flow | ng generate @angular/core:control-flow |
| Signal-based Inputs | ng generate @angular/core:signal-input-migration |
| Signal Queries | ng generate @angular/core:signal-queries-migration |
| Functional Outputs | ng generate @angular/core:output-migration |
inject() Function |
ng generate @angular/core:inject |
| Self-Closing Tags | ng generate @angular/core:self-closing-tag |
| Standalone | ng 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:
- Phase 1: Run
ng generate @angular/core:standaloneand select the option to Convert all components, directives, and pipes to standalone. - Phase 2: Verify the build with
ng build. Run the command again and select Remove unnecessary NgModule classes. - Phase 3: Verify the build with
ng build. Run the final pass and select Bootstrap the project using standalone APIs.