angular/compiler-cli peer dependencies

Question

I've tried a lot to fix this problem, but I can't find any solution. This is the error:

npm ERR! While resolving: @angular-devkit/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"^12.2.16" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler-cli@"^14.0.0" from @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"^14.2.4" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^14.0.0" from @angular-devkit/[email protected]
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"^14.2.4" from the root project

I've tried to downgrade angular/compiler-cli, but then I get the next error. Also used --force and --allow-dirty but the error still occurse. My goal was to upgrade angular from version 13 to 14. Hope someone can help..

Answer 1

You can check peer dependencies of a package using the command below.

npm info @angular-devkit/[email protected] peerDependencies

From this you will notice that @angular-devkit/[email protected] requires @angular/compiler-cli version 14.n.n (see https://semver.org/).

{
  '@angular/compiler-cli': '^14.0.0',
  '@angular/localize': '^14.0.0',
  '@angular/service-worker': '^14.0.0',
  karma: '^6.3.0',
  'ng-packagr': '^14.0.0',
  protractor: '^7.0.0',
  tailwindcss: '^2.0.0 || ^3.0.0',
  typescript: '>=4.6.2 <4.9'
}

To remedy this problem, you can firstly try typing ng update (https://angular.io/cli/update) and then updating each package as per results.

Alternatively (probably not recommended), you can try manually installing a specific version of the peer dependencies npm install [email protected].

Another useful "trick" I have used to investigate NPM versions for new projects is to quickly create a new empty Angular project using the CLI.

I assume you have installed @angular\cli globally with correct version.

Something like the below will be quick as no installation of node_modules, etc.

ng new test1 --skip-git=true --skip-install=true --routing=false --strict=true --style=css

Examine the package.json and note the versions and compared and contrast to your project package.json.