2

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/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?

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

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/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:

Edit 3: 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:
Dave
  • 15,639
  • 133
  • 442
  • 830

4 Answers4

4

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

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

Try

ng add @angular-eslint/schematics@13.2.1
Mohamed Karkotly
  • 1,364
  • 3
  • 13
  • 26
  • 1
    As an "Edit 3" to my question, I included the error output as a result of running teh command you suggested. – Dave Jul 23 '22 at 18:36
  • Does a regular `npm i` causes this error as well? – Mohamed Karkotly Jul 23 '22 at 19:51
  • Running "npm i @angular-eslint/schematics@13.2.1" does cause the same error. – Dave Jul 24 '22 at 20:15
  • I meant does running `npm i` alone causes this problem too? – Mohamed Karkotly Jul 24 '22 at 20:34
  • Yes if I run "npm i" everything runs and installs fine. – Dave Jul 25 '22 at 13:21
  • 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. "https://www.npmjs.com/package/@angular-eslint/schematics" I would suggest you do the same. – Mohamed Karkotly Jul 25 '22 at 14:49
  • 1
    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. – Dave Jul 25 '22 at 17:47
  • 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 – Mohamed Karkotly Jul 25 '22 at 18:21
2

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.

Alex
  • 848
  • 6
  • 7
  • 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. – Dave Jul 22 '22 at 21:00
2

Just specify the same version for each package at installation:

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

ng update @angular-eslint/schematics@12
Adnan
  • 814
  • 12
  • 38
  • 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/compiler-cli@13.2.7) ...) – Dave Jul 24 '22 at 20:19
  • What is your version of npm? it seems it's a known issue with npm. please see this https://github.com/angular/angular-cli/issues/22826#issuecomment-1064117583 comment and referenced npm issue – Adnan Jul 25 '22 at 05:43
  • 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. – Dave Jul 25 '22 at 13:55
  • 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. – Adnan Jul 26 '22 at 06:04
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.

Obum
  • 1,485
  • 3
  • 7
  • 20
  • 1
    Gave it a try. I added the output (command failed) that resulted as an edit to my question. – Dave Jul 20 '22 at 16:58
  • 1
    I understand. The logs are clearer. @Alex's answer should then solve the problem – Obum Jul 21 '22 at 16:58
  • 2
    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. – Dave Jul 22 '22 at 21:00
  • 1
    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. – Obum Jul 23 '22 at 15:00
  • Thanks. How do I install the old Angular project's CLi globally? – Dave Jul 24 '22 at 20:20
  • Just include the `-g` or `--global` flag to the npm command. Something like `npm i -g @angular/cli@13.2.6` should install exactly version 13.2.6. (Because that the version specified in the question). – Obum Jul 24 '22 at 20:40