Upgrading Dependencies in an Angular Project: Challenges and Solutions

Overview

Today, we tackled the task of upgrading an Angular project to ensure compatibility with Angular 18.x. This involved resolving various dependency conflicts, installing Node Version Manager (NVM), and addressing numerous peer dependency issues. Below is a detailed account of the process, challenges, and solutions implemented throughout the day.

Initial Errors and Setup

Our journey began with attempts to upgrade TypeScript to a version compatible with Angular 18.x. We encountered an error indicating that the Angular Compiler requires TypeScript versions between 4.9.3 and 5.2.0, but version 5.5.4 was found instead:

This necessitated downgrading TypeScript to a compatible version.

Addressing Node.js Compatibility

We then faced a challenge with Node.js version compatibility:

This required installing a compatible version of Node.js. We attempted to use NVM for Windows but encountered issues with the installation process:

After addressing this, we managed to install NVM and switch to the required Node.js version:

Reinstalling Angular CLI and Node Modules

With the correct Node.js version in place, we reinstalled Angular CLI and other node modules:

Peer Dependency Conflicts

Despite resolving Node.js issues, we faced multiple peer dependency conflicts, particularly with libraries such as , , , , and . These packages were incompatible with Angular 18.x:

We needed to find compatible versions or alternative libraries.

Using npm-check-updates

To streamline the process, we utilized (ncu) to upgrade all dependencies:

1. Install

2. Check for outdated packages

3. Upgrade all dependencies

4. Reinstall dependencies

Manually Resolving Specific Dependency Issues

For packages that did not have compatible versions, we manually checked and updated :

Example adjustments:

We then cleaned and reinstalled dependencies:

Alternative Libraries

For libraries without compatible versions, we considered alternatives:

• For : Used Angular Material

• For : Used

• For : Used

Final Verification and Build

After resolving the dependencies, we verified and rebuilt the project:

Conclusion

Upgrading the Angular project to version 18.x and resolving dependency conflicts was a multi-step process that involved:

1. Downgrading TypeScript to a compatible version.

2. Installing and using a compatible Node.js version with NVM.

3. Reinstalling Angular CLI and node modules.

4. Utilizing to manage dependencies.

5. Manually resolving specific dependency issues.

6. Considering and implementing alternative libraries where necessary.

Despite the challenges, we successfully upgraded the project, ensuring compatibility and stability with Angular 18.x.