Upgrading to Ng 16 – npm ERR! Conflicting peer dependency: @angular/[email protected] – Angular

The Problem:

While upgrading Angular from version 11 to 16, an npm error occurs: npm ERR! Conflicting peer dependency: @angular/[email protected].

The root cause is a conflict between the peer dependency of @angular-devkit/build-angular and the installed version of @angular/compiler-cli. The error message suggests resolving the conflict by either fixing the upstream dependency conflict or accepting an incorrect dependency resolution using the –force or –legacy-peer-deps flags.

Additional context:

• Angular CLI version: 11.2.19
• Node version: 18.16.0
• OS: darwin x64
• Angular version: 11.2.14

Relevant commands and resources:

• Documentation: https://update.angular.io/?v=11.0-16.0
• Command: ng update @angular/core@12 @angular/cli@12
• Stack Overflow post: https://stackoverflow.com/questions/66989383/could-not-resolve-dependency-npm-err-peer-angular-compiler11-2-8/76955524#76955524

The Solutions:

Solution 1: Fixing Conflicting Peer Dependency

1. Use --legacy-peer-deps Flag:

   Run the following command in your terminal:

   npm i --save --legacy-peer-deps
   

   This command will install the required dependencies while ignoring any conflicting peer dependencies. It’s a temporary solution that allows you to proceed with the installation.

2. Delete package-lock.json and node_modules

   Delete the package-lock.json and node_modules directories in your project. These directories contain information about the previously installed dependencies, and deleting them will force npm to reinstall everything from scratch.

3. Reinstall Dependencies with npm i

   Run the command npm i in your terminal. This will reinstall all the dependencies according to the package.json file, including any conflicting peer dependencies that you previously ignored using --legacy-peer-deps.

4. Check for Issues

   After the reinstallation is complete, check if the conflicting peer dependency error has been resolved. You can do this by running npm run ng build or npm start to see if your application builds and runs without errors.

Solution 2: Updating packages and clearing cache

1. Install the latest versions of the Angular packages using either of these options:

   • Option 1: Run npm install --save --legacy-peer-deps to temporarily allow the installation of packages with conflicting peer dependencies.
   • Option 2: Set a permanent configuration option by running npm config set legacy-peer-deps true. This will always allow the installation of packages with conflicting peer dependencies.

2. Delete the node_modules folder and the package-lock.json file to remove any outdated or conflicting packages and dependencies.

3. Update the package.json file to include the latest versions of the packages. To do this, run the following command:

   npx npm-check-updates -u
   

   This command will check for the latest versions of the packages listed in your package.json file and update the versions accordingly.

4. Finally, run npm install to install the updated packages. This should resolve the conflicting peer dependency issue and allow you to upgrade to Angular 16 successfully.