How do I install the right version of @angular-eslint/schematic to match my angular-compiler?

Question

. Answers to this question are eligible for a +200 reputation bounty. Dave is looking for an .

I have these dependencies defined in my package.json file

"@angular/compiler": "^13.2.6",
"@angular/core": "^13.2.6",

I would like to get "ng lint" to run, but evidently I need to run a migration so I ran

$ ng add @angular-eslint/schematics
Your global Angular CLI version (14.0.5) is greater than your local version (13.2.6). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
ℹ Using package manager: npm
✔ Found compatible package version: @angular-eslint/schematics@13.5.0.
✔ Package information loaded.

The package @angular-eslint/schematics@13.5.0 will be installed and executed.
Would you like to proceed? Yes
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular/compiler-cli@13.2.7
npm ERR! Found: @angular/compiler@13.3.0
npm ERR! node_modules/@angular/compiler
npm ERR!   peer @angular/compiler@"13.3.0" from @angular/platform-browser-dynamic@13.3.0
npm ERR!   node_modules/@angular/platform-browser-dynamic
npm ERR!     @angular/platform-browser-dynamic@"^13.2.6" from the root project
npm ERR!   @angular/compiler@"^13.2.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"13.2.7" from @angular/compiler-cli@13.2.7
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/build-angular@13.2.6
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~13.2.5" from the root project
npm ERR!   peer @angular/compiler-cli@"^13.0.0" from @ngtools/webpack@13.2.6
npm ERR!   node_modules/@ngtools/webpack
npm ERR!     @ngtools/webpack@"13.2.6" from @angular-devkit/build-angular@13.2.6
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~13.2.5" from the root project
npm ERR!   1 more (the root project)
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler@13.2.7
npm ERR! node_modules/@angular/compiler
npm ERR!   peer @angular/compiler@"13.2.7" from @angular/compiler-cli@13.2.7
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/build-angular@13.2.6
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~13.2.5" from the root project
npm ERR!     peer @angular/compiler-cli@"^13.0.0" from @ngtools/webpack@13.2.6
npm ERR!     node_modules/@ngtools/webpack
npm ERR!       @ngtools/webpack@"13.2.6" from @angular-devkit/build-angular@13.2.6
npm ERR!       node_modules/@angular-devkit/build-angular
npm ERR!         dev @angular-devkit/build-angular@"~13.2.5" from the root project
npm ERR!     1 more (the root project)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\mydemouser\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mydemouser\AppData\Local\npm-cache\_logs\2022-07-15T13_41_12_993Z-debug-0.log
✖ Package install failed, see above.

How do I save teh right install the right version of the tool to match the compiler I'm using?

In response to the answer given, this was the output after running the command again when clearing out package-lock and node_modules

> ng add @angular-eslint/schematics
i Using package manager: npm
√ Found compatible package version: @angular-eslint/schematics@1.0.0.
√ Package information loaded.

The package @angular-eslint/schematics@1.0.0 will be installed and executed.
Would you like to proceed? Yes
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-project@0.0.0
npm ERR! Found: @angular/common@13.3.11
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^13.2.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^9.0.0" from ng-http-loader@7.0.0
npm ERR! node_modules/ng-http-loader
npm ERR!   ng-http-loader@"^7.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\myuser\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\myuser\AppData\Local\npm-cache\_logs\2022-07-20T16_52_29_241Z-debug-0.log
× Packages installation failed, see above.

In response to @Alex's answer, I got this error after upgrading the dependency

> ng add @angular-eslint/schematics
Your global Angular CLI version (14.0.5) is greater than your local version (13.2.6). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
i Using package manager: npm
√ Found compatible package version: @angular-eslint/schematics@13.5.0.
√ Package information loaded.

The package @angular-eslint/schematics@13.5.0 will be installed and executed.
Would you like to proceed? Yes
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular/compiler-cli@13.2.7
npm ERR! Found: @angular/compiler@13.3.0
npm ERR! node_modules/@angular/compiler
npm ERR!   peer @angular/compiler@"13.3.0" from @angular/platform-browser-dynamic@13.3.0
npm ERR!   node_modules/@angular/platform-browser-dynamic
npm ERR!     @angular/platform-browser-dynamic@"^13.2.6" from the root project
npm ERR!   @angular/compiler@"^13.2.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"13.2.7" from @angular/compiler-cli@13.2.7
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/build-angular@13.2.6
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~13.2.5" from the root project
npm ERR!   peer @angular/compiler-cli@"^13.0.0" from @ngtools/webpack@13.2.6
npm ERR!   node_modules/@ngtools/webpack
npm ERR!     @ngtools/webpack@"13.2.6" from @angular-devkit/build-angular@13.2.6
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~13.2.5" from the root project
npm ERR!   1 more (the root project)
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler@13.2.7
npm ERR! node_modules/@angular/compiler
npm ERR!   peer @angular/compiler@"13.2.7" from @angular/compiler-cli@13.2.7
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/build-angular@13.2.6
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~13.2.5" from the root project
npm ERR!     peer @angular/compiler-cli@"^13.0.0" from @ngtools/webpack@13.2.6
npm ERR!     node_modules/@ngtools/webpack
npm ERR!       @ngtools/webpack@"13.2.6" from @angular-devkit/build-angular@13.2.6
npm ERR!       node_modules/@angular-devkit/build-angular
npm ERR!         dev @angular-devkit/build-angular@"~13.2.5" from the root project
npm ERR!     1 more (the root project)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

npm ERR! A complete log of this run can be found in:

Here's the error I got from running @Mohammed.Kotkotly's answer ...

> ng add @angular-eslint/schematics@13.2.1
√ Package information loaded.

The package @angular-eslint/schematics@13.2.1 will be installed and executed.
Would you like to proceed? Yes
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular/compiler-cli@13.2.7
npm ERR! Found: @angular/compiler@13.3.0
npm ERR! node_modules/@angular/compiler
npm ERR!   peer @angular/compiler@"13.3.0" from @angular/platform-browser-dynamic@13.3.0
npm ERR!   node_modules/@angular/platform-browser-dynamic
npm ERR!     @angular/platform-browser-dynamic@"^13.2.6" from the root project
npm ERR!   @angular/compiler@"^13.2.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"13.2.7" from @angular/compiler-cli@13.2.7
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/build-angular@13.2.6
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~13.2.5" from the root project
npm ERR!   peer @angular/compiler-cli@"^13.0.0" from @ngtools/webpack@13.2.6
npm ERR!   node_modules/@ngtools/webpack
npm ERR!     @ngtools/webpack@"13.2.6" from @angular-devkit/build-angular@13.2.6
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~13.2.5" from the root project
npm ERR!   1 more (the root project)
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler@13.2.7
npm ERR! node_modules/@angular/compiler
npm ERR!   peer @angular/compiler@"13.2.7" from @angular/compiler-cli@13.2.7
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/build-angular@13.2.6
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~13.2.5" from the root project
npm ERR!     peer @angular/compiler-cli@"^13.0.0" from @ngtools/webpack@13.2.6
npm ERR!     node_modules/@ngtools/webpack
npm ERR!       @ngtools/webpack@"13.2.6" from @angular-devkit/build-angular@13.2.6
npm ERR!       node_modules/@angular-devkit/build-angular
npm ERR!         dev @angular-devkit/build-angular@"~13.2.5" from the root project
npm ERR!     1 more (the root project)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\dt236609\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

       

Answer 1

Your new stacktrace explains your error. You have ng-http-loader@7.0.0 installed which is only compatible with Angular ^9.0.0 . Update ng-http loader to >=11.0.0.

Answer 2

The problem is due to compatibility, and according to Angular ESLint Publisher

• @angular-eslint packages at 12.xx and @angular/cli@12.xx are compatible
• @angular-eslint packages at 13.xx and @angular/cli@13.xx are compatible
• @angular-eslint packages at 14.xx and @angular/cli@14.xx are compatible
• ...and so on...

Try

ng add @angular-eslint/schematics@13.2.1

Answer 3

This problem is sincerely not from Angular (nor the schematics linter) but with NPM.

To solve the problem, delete package-lock.json and node_modules . Run npm install again. Then run the schematics command.

Deleting package-lock.json usually solves this because the existing package-lock.json could be preventing NPM from properly sorting out dependencies and versions. So there are version updates deep down in the indirect dependencies that could be clashing and causing this error.

Answer 4

Just specify the same version for each package at installation:

 ng update @angular/core@12 @angular/cli@12 ng update @angular-eslint/schematics@12