Migrate a pre-Angular 19 Project to Standalone

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

  1. Run linting and formatting checks to ensure code consistency[4].
  2. Manually review residual NgModule declarations or edge cases not handled by the schematic[4].
  3. Execute unit tests and resolve any failures[4].
  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

  • Date: