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.

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:

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:

@Component({
  selector: 'app',
  template: 'Hello',
  standalone: false,
})
export class AppComponent {}

Example After Migration:

@Component({
  selector: 'app',
  template: 'Hello',
  standalone: true,
  imports: [CommonModule],
})
export class AppComponent {}

Step 2: Remove Unnecessary NgModules

Run the schematic again:

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:

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):

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Example After Migration (Bootstrapping):

bootstrapApplication(AppComponent, {
  providers: [...],
});

Post-Migration Tasks

Run linting and formatting checks to ensure code consistency[4].
Manually review residual NgModule declarations 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