Migrate a pre-Angular 19 Project to Standalone
Migrating an Angular project to standalone components which are the default in Angular 19 is a structured process that simplifies application architecture by removing the reliance on NgModules. Standalone components, introduced in Angular 14 and made stable in Angular 15, are now the default in Angular 19. Below is a step-by-step guide to performing this migration.
Latest from angular 19
Bookmark This Article
Your browser doesn't support automatic bookmarking. You can:
- Press Ctrl+D (or Command+D on Mac) to bookmark this page
- Or drag this link to your bookmarks bar:
Clicking this bookmarklet when on any page of our site will bookmark the current page.
Prerequisites
Before starting the migration: - Ensure your project uses Angular 15.2.0 or later[2][4]. - Verify that the project builds without compilation errors[2][4]. - Save all work and start on a clean Git branch to track changes easily[2][4].
Migration Steps
The migration process involves three main steps, which can be automated using the Angular CLI schematic (@angular/core:standalone):
Step 1: Convert Components, Directives, and Pipes to Standalone
Run the following command:
bash
ng generate @angular/core:standalone
Select the option to convert all components, directives, and pipes to standalone. This updates their metadata by setting standalone: true and moves dependencies from NgModule declarations to imports[2][3][5].
Example Before Migration:
typescript
@Component({
selector: 'app',
template: 'Hello',
standalone: false,
})
export class AppComponent {}
Example After Migration:
typescript
@Component({
selector: 'app',
template: 'Hello',
standalone: true,
imports: [CommonModule],
})
export class AppComponent {}
Step 2: Remove Unnecessary NgModules
Run the schematic again:
bash
ng generate @angular/core:standalone
Select the option to remove unused NgModule classes. This step eliminates redundant modules and updates imports accordingly[2][3][5].
Step 3: Switch to Standalone Bootstrapping API
Run the schematic one more time:
bash
ng generate @angular/core:standalone
Choose the option to bootstrap the application using standalone APIs. This replaces bootstrapModule with bootstrapApplication, removes the root NgModule, and migrates providers/imports into the new bootstrap configuration[2][3].
Example Before Migration (Bootstrapping):
typescript
@NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Example After Migration (Bootstrapping):
typescript
bootstrapApplication(AppComponent, {
providers: [...],
});
Post-Migration Tasks
- Run linting and formatting checks to ensure code consistency[4].
- Manually review residual
NgModuledeclarations or edge cases not handled by the schematic[4]. - Execute unit tests and resolve any failures[4].
- Thoroughly test the application to confirm functionality across all scenarios[4].
Benefits of Migration
- Simplified architecture with reduced boilerplate code.
- Enhanced modularity and reusability of components.
- Alignment with Angular's evolving ecosystem for future-ready applications[4].
By following this systematic approach, developers can fully leverage Angular's standalone components for streamlined development and improved application structure.
[1] https://www.youtube.com/watch?v=_7kbgMu8XbI [2] https://angular.dev/reference/migrations/standalone/ [3] https://www.angulararchitects.io/en/blog/tutorial-automatically-migrating-to-standalone-components-in-3-steps/ [4] https://dev.to/nicholajones075/migrating-to-angular-standalone-components-a-step-by-step-guide-5a1c [5] https://timdeschryver.dev/blog/i-tried-the-angular-standalone-migration-and-here-is-the-result [6] https://blog.ninja-squad.com/2023/02/21/migrate-an-angular-application-to-standalone/ [7] https://www.infoworld.com/article/3504682/angular-19-to-make-standalone-the-default-for-components.html [8] https://dev.to/dimeloper/angular-19-updating-our-projects-and-harnessing-its-latest-features-3ppm
