Migrating Angular 13 to Angular 19: A Comprehensive Guide

Migrating Angular projects incrementally from version 13 to 19 is essential for leveraging new features and maintaining compatibility while ensuring a smooth transition. The process requires running version updates step-by-step, validating functionality between each migration, and adopting modern Angular practices like standalone APIs. Using tools like Nx Console simplifies the process.

Major Differences Between Angular Versions

Each Angular version introduces new features and deprecates old ones. Here are the key changes:

1. Standalone APIs:

Angular 14 introduced standalone components, directives, and pipes, removing the strict dependency on NgModules.

2. TypeScript Compatibility:

Each Angular version supports specific TypeScript versions. Ensure your project aligns with the TypeScript version required by the Angular version you’re migrating to.

3. Nx Project Configuration Changes:

The nx.json configuration has evolved, including changes in workspace structure and tasks. This affects how libraries and apps are managed in a monorepo.

4. Dependency Updates:

Libraries such as RxJS and Zone.js require version updates to maintain compatibility.

Step-by-Step Migration Guide

1. Incremental Version Updates

Incremental updates help manage breaking changes between versions. Run the following commands sequentially, verifying that your application builds and functions correctly at each step:

ng update @angular/core@14 @angular/cli@14
ng update @angular/core@15 @angular/cli@15
ng update @angular/core@16 @angular/cli@16
ng update @angular/core@17 @angular/cli@17
ng update @angular/core@18 @angular/cli@18
ng update @angular/core@19 @angular/cli@19

• Validation Between Steps: After each step, run your tests (ng test), build your project (ng build), and verify the app in your environment.

2. Using Nx Console for Migration

Nx Console is a powerful tool for managing Angular projects in monorepos. To simplify migrations:

1. Install the Nx Console extension in your IDE.

2. Use it to run Angular update commands.

3. Check for affected libraries and apps, ensuring that they are updated and compatible with the new Angular version.

Migrating to Standalone APIs

Standalone APIs simplify Angular development by eliminating the need for NgModules in many cases.

Migration Commands

Run the following commands in order:

1. Convert components, directives, and pipes to standalone:

ng generate @angular/core:standalone --convertAll

2. Remove unnecessary NgModule classes:

ng generate @angular/core:standalone --removeNgModules

3. Bootstrap the project using standalone APIs:

ng generate @angular/core:standalone --bootstrap

After Migration

1. Run linting and formatting checks:

ng lint

2. Fix any errors or inconsistencies.

3. Commit the results to version control.

Updates to TypeScript and Angular Compiler

TypeScript Compatibility

Angular 19 requires TypeScript 5.2 or later. Update your tsconfig.json:

{
  "compilerOptions": {
    "target": "es2022",
    "module": "es2022",
    "strict": true
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictTemplates": true,
    "compilationMode": "partial"
  }
}

Angular Compiler Changes

1. Ensure partial compilation mode is enabled in libraries.

2. Check compatibility of dependencies with the new compiler.

Benefits of Standalone APIs

Before Migration (Angular 13):

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

After Migration (Angular 19):

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

• Simplified Bootstrapping: Reduces boilerplate code and improves maintainability.

• Improved Performance: Faster load times with fewer layers of abstraction.

• Better Modularity: Allows individual components and directives to be independently declared as standalone.

Challenges and Tips

Common Issues

• Compiler Errors: Ensure all libraries use compatible Angular versions.

• Deprecated APIs: Replace removed APIs like setSortModel with modern equivalents (applyColumnState).

• Large Monorepos: Use tools like Nx Console to identify affected libraries and update dependencies incrementally.

Tips

• Testing: Run end-to-end tests after each migration step.

• Backup: Always commit your changes before proceeding to the next migration.

• Documentation: Refer to the Angular and Nx migration guides for version-specific changes.

Conclusion

Migrating from Angular 13 to Angular 19 requires careful planning and execution. Incremental updates, the adoption of standalone APIs, and tools like Nx Console make the process manageable. By leveraging these practices, your project will benefit from Angular’s latest features, improved performance, and long-term maintainability.