Login/Register
How do I install the right version of @angular-eslint/schematic to match my angular-compiler?
Asked Answered
angularlintangular13angular-compiler
P

5

7

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:
Puffball answered 15/7, 2022 at 13:53 Comment(5)
use --legacy-peer-deps – Chittagong
I tried running "ng add @angular-eslint/schematics --legacy-peer-deps" but am getting the same error as before. – Puffball
Hey try specifying the exact version in your package.json without the ‘^’ it looks like to me your getting incompatible version resolution – Minette
have you considered to update your application to the latest angular version? – Sallysallyann
Unfortunately I don't have control over the Angular version. I have to work with what is there. – Puffball
R
6

Just specify the same version for each package at installation:

ng update @angular/core@12 @angular/cli@12

ng update @angular-eslint/schematics@12
Riane answered 24/7, 2022 at 5:50 Comment(4)
Running the first command results in the error of "Edit 3" of my question (ERR! Could not resolve dependency:, ERR! peer @angular/compiler@"13.2.7" from @angular/[email protected]) ...) – Puffball
What is your version of npm? it seems it's a known issue with npm. please see this github.com/angular/angular-cli/issues/… comment and referenced npm issue – Riane
I'm using npm 8.11.0. I think you want me to include "--force" in the commands you listed in your answer? If so, I tried "ng update @angular-eslint/schematics@12 --force" results in a "Package '@angular-eslint/schematics' is not a dependency." error. Also, I'm using Angular 13, why do the commands you list reference "@12"? Maybe that has nothing to do with my Angular version. – Puffball
Yes, it's just for saying using the same version. but yesterday I faced the same issue and fixed it by updating every dependency conflict with updating that conflicted package to the latest version. give it a try. – Riane
C
4

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

Try

ng add @angular-eslint/[email protected]
Cryo answered 23/7, 2022 at 16:36 Comment(8)
As an "Edit 3" to my question, I included the error output as a result of running teh command you suggested. – Puffball
Does a regular npm i causes this error as well? – Cryo
Running "npm i @angular-eslint/[email protected]" does cause the same error. – Puffball
I meant does running npm i alone causes this problem too? – Cryo
Yes if I run "npm i" everything runs and installs fine. – Puffball
I've had a similar problem before, I went to the versions tab inside npmjs.com of the library I was trying to install and kept trying different versions until it worked, sometimes a minor change in a lib version might be what you are looking for. "npmjs.com/package/@angular-eslint/schematics" I would suggest you do the same. – Cryo
Thanks for this thought. I had done what you suggested, unfortunately I couldn't find anythign that worked so I decided to post the question here to get a definitive answer. – Puffball
One last thing we can try, start clean by deleting node_modules and package-lock.json, make sure you have the right versions for angular related deps (Share package.json here if you want), then open your CMD as an administrator and cd to your project's folder, I once encountered a problem where I didn't have the permission to use flags like --force, etc.., doing that using CMD as admin was the solution, now use the command npm i first, then try adding @angular-eslint/schematics, then try again the flags such as force, --legacy-peer-deps while still in CMD – Cryo
C
3

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
Confidence answered 29/12, 2023 at 8:19 Comment(4)
This plus specifying the version for eslint worked for me trying to upgrade to an LTS version: ng update @angular/core@16 @angular/cli@16 @angular-eslint/schematics@16 – Sungsungari
It would be better to include the version of eslint @angular-eslint/schematics@17 as of time of upgrade the version might be different – Gamp
ng update @angular/core@15 @angular/cli@15 @angular-eslint/schematics@15 worked for me you should mention the specific version as well when updating from old to next release – Soidisant
I have mentioned it now. – Confidence
B
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.

Barometer answered 21/7, 2022 at 14:59 Comment(1)
Were there any specific commands I should run to do taht? I changed the definition in package.json and then ran "npm i --legacy-peer-deps". Then I ran my original command. The resulting error is included as a second edit to my question. – Puffball
D
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.

  1. 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.

Deluge answered 19/7, 2022 at 23:40 Comment(6)
Gave it a try. I added the output (command failed) that resulted as an edit to my question. – Puffball
I understand. The logs are clearer. @Alex's answer should then solve the problem – Deluge
I included an edit to my question with the error I got from Alex's answer, although, not sure if I interpreted what commands he wanted me to run correctly. – Puffball
Hi @Dave, I prepended and entirely new work-around. I hope it works this time. I noticed from one of your comments under the question post that you don't the have ability to change the version of the Angular project. So maybe before starting the solution, install the specific version of the old Angular project's CLi globally. This way versions won't be different. – Deluge
Thanks. How do I install the old Angular project's CLi globally? – Puffball
Just include the -g or --global flag to the npm command. Something like npm i -g @angular/[email protected] should install exactly version 13.2.6. (Because that the version specified in the question). – Deluge

© 2022 - 2024 — McMap. All rights reserved.