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

Question

I'm using npm v 8.11.0. 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/[email protected].
✔ Package information loaded.

The package @angular-eslint/[email protected] 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/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/compiler
npm ERR!   peer @angular/compiler@"13.3.0" from @angular/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/[email protected]
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/[email protected]
npm ERR!   node_modules/@ngtools/webpack
npm ERR!     @ngtools/webpack@"13.2.6" from @angular-devkit/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/compiler
npm ERR!   peer @angular/compiler@"13.2.7" from @angular/[email protected]
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/[email protected]
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/[email protected]
npm ERR!     node_modules/@ngtools/webpack
npm ERR!       @ngtools/webpack@"13.2.6" from @angular-devkit/[email protected]
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?

Edit: 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/[email protected].
√ Package information loaded.

The package @angular-eslint/[email protected] 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: [email protected]
npm ERR! Found: @angular/[email protected]
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 [email protected]
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.

Edit 2: 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/[email protected].
√ Package information loaded.

The package @angular-eslint/[email protected] 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/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/compiler
npm ERR!   peer @angular/compiler@"13.3.0" from @angular/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/[email protected]
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/[email protected]
npm ERR!   node_modules/@ngtools/webpack
npm ERR!     @ngtools/webpack@"13.2.6" from @angular-devkit/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/compiler
npm ERR!   peer @angular/compiler@"13.2.7" from @angular/[email protected]
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/[email protected]
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/[email protected]
npm ERR!     node_modules/@ngtools/webpack
npm ERR!       @ngtools/webpack@"13.2.6" from @angular-devkit/[email protected]
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:

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

> ng add @angular-eslint/[email protected]
√ Package information loaded.

The package @angular-eslint/[email protected] 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/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/compiler
npm ERR!   peer @angular/compiler@"13.3.0" from @angular/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/[email protected]
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/[email protected]
npm ERR!   node_modules/@ngtools/webpack
npm ERR!     @ngtools/webpack@"13.2.6" from @angular-devkit/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/compiler
npm ERR!   peer @angular/compiler@"13.2.7" from @angular/[email protected]
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/[email protected]
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/[email protected]
npm ERR!     node_modules/@ngtools/webpack
npm ERR!       @ngtools/webpack@"13.2.6" from @angular-devkit/[email protected]
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

Attempt the following steps. It should solve the problems.

1. Create an entirely new Angular project. Use peculiar settings as it is with your current project, like if you are using scss for styles for example.
2. Add the lint schematics with the ng add @angular-eslint/schematics command. It should completely appropriately.
3. If you are using Angular Material, also configure it with the ng add @angular/material command.
4. Install the dependencies your current project uses here.

Like look at your package.json, then compare the dependencies your project has that these new project doesn't, then install them. Something like

npm install dep1 dep2 dep3 ...

where dep means dependency. Do it this way so that npm could freshly configure the dependency versions.

5. Copy the .git and src folders from your project into this new project. Do this so that it you can continue coding from where you ended.

All things being equal, you should only have slight changes with the config files of the project (angular.json, package.json, package-lock.json, ...) And everything should work fine. You should now start working from this new (turned-old) project instead

I once used the above workaround when I was trying to add Server Side Rendering with the ng add @nguniversal/express-engine. I kept getting the dependency clash errors just like you till I did the above.

Old Answer

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 2

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

Answer 3

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

• @angular-eslint packages at 12.x.x and @angular/[email protected] are compatible
• @angular-eslint packages at 13.x.x and @angular/[email protected] are compatible
• @angular-eslint packages at 14.x.x and @angular/[email protected] are compatible
• ...and so on...

Try

ng add @angular-eslint/[email protected]

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

Answer 5

For me the fix was to run the @angular-eslint/schematics update together with the @angular/core@12 @angular/cli@12 update. Upgrading to Angular 17

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