如何安装正确版本的 @Angular-eslint/schematic 以匹配我的 Angular 编译器？

Question

我正在使用 npm v 8.11.0。我在 package.json 文件中定义了这些依赖项

\n

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

\n

我想让“ng lint”运行，但显然我需要运行迁移，所以我运行

\n

$ ng add @angular-eslint/schematics\nYour global Angular CLI version (14.0.5) is greater than your local version (13.2.6). The local Angular CLI version is used.\n\nTo disable this warning use "ng config -g cli.warnings.versionMismatch false".\n\xe2\x84\xb9 Using package manager: npm\n\xe2\x9c\x94 Found compatible package version: @angular-eslint/schematics@13.5.0.\n\xe2\x9c\x94 Package information loaded.\n\nThe package @angular-eslint/schematics@13.5.0 will be installed and executed.\nWould you like to proceed? Yes\nnpm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.\nnpm ERR! code ERESOLVE\nnpm ERR! ERESOLVE could not resolve\nnpm ERR!\nnpm ERR! While resolving: @angular/compiler-cli@13.2.7\nnpm ERR! Found: @angular/compiler@13.3.0\nnpm ERR! node_modules/@angular/compiler\nnpm ERR!   peer @angular/compiler@"13.3.0" from @angular/platform-browser-dynamic@13.3.0\nnpm ERR!   node_modules/@angular/platform-browser-dynamic\nnpm ERR!     @angular/platform-browser-dynamic@"^13.2.6" from the root project\nnpm ERR!   @angular/compiler@"^13.2.6" from the root project\nnpm ERR!\nnpm ERR! Could not resolve dependency:\nnpm ERR! peer @angular/compiler@"13.2.7" from @angular/compiler-cli@13.2.7\nnpm ERR! node_modules/@angular/compiler-cli\nnpm ERR!   peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/build-angular@13.2.6\nnpm ERR!   node_modules/@angular-devkit/build-angular\nnpm ERR!     dev @angular-devkit/build-angular@"~13.2.5" from the root project\nnpm ERR!   peer @angular/compiler-cli@"^13.0.0" from @ngtools/webpack@13.2.6\nnpm ERR!   node_modules/@ngtools/webpack\nnpm ERR!     @ngtools/webpack@"13.2.6" from @angular-devkit/build-angular@13.2.6\nnpm ERR!     node_modules/@angular-devkit/build-angular\nnpm ERR!       dev @angular-devkit/build-angular@"~13.2.5" from the root project\nnpm ERR!   1 more (the root project)\nnpm ERR!\nnpm ERR! Conflicting peer dependency: @angular/compiler@13.2.7\nnpm ERR! node_modules/@angular/compiler\nnpm ERR!   peer @angular/compiler@"13.2.7" from @angular/compiler-cli@13.2.7\nnpm ERR!   node_modules/@angular/compiler-cli\nnpm ERR!     peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/build-angular@13.2.6\nnpm ERR!     node_modules/@angular-devkit/build-angular\nnpm ERR!       dev @angular-devkit/build-angular@"~13.2.5" from the root project\nnpm ERR!     peer @angular/compiler-cli@"^13.0.0" from @ngtools/webpack@13.2.6\nnpm ERR!     node_modules/@ngtools/webpack\nnpm ERR!       @ngtools/webpack@"13.2.6" from @angular-devkit/build-angular@13.2.6\nnpm ERR!       node_modules/@angular-devkit/build-angular\nnpm ERR!         dev @angular-devkit/build-angular@"~13.2.5" from the root project\nnpm ERR!     1 more (the root project)\nnpm ERR!\nnpm ERR! Fix the upstream dependency conflict, or retry\nnpm ERR! this command with --force, or --legacy-peer-deps\nnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.\nnpm ERR!\nnpm ERR! See C:\\Users\\mydemouser\\AppData\\Local\\npm-cache\\eresolve-report.txt for a full report.\n\nnpm ERR! A complete log of this run can be found in:\nnpm ERR!     C:\\Users\\mydemouser\\AppData\\Local\\npm-cache\\_logs\\2022-07-15T13_41_12_993Z-debug-0.log\n\xe2\x9c\x96 Package install failed, see above.\n

\n

如何正确安装正确版本的工具以匹配我正在使用的编译器？

\n

编辑：为了响应给出的答案，这是清除 package-lock 和 node_modules 时再次运行命令后的输出

\n

> ng add @angular-eslint/schematics\ni Using package manager: npm\n\xe2\x88\x9a Found compatible package version: @angular-eslint/schematics@1.0.0.\n\xe2\x88\x9a Package information loaded.\n\nThe package @angular-eslint/schematics@1.0.0 will be installed and executed.\nWould you like to proceed? Yes\nnpm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.\nnpm ERR! code ERESOLVE\nnpm ERR! ERESOLVE unable to resolve dependency tree\nnpm ERR!\nnpm ERR! While resolving: my-project@0.0.0\nnpm ERR! Found: @angular/common@13.3.11\nnpm ERR! node_modules/@angular/common\nnpm ERR!   @angular/common@"^13.2.6" from the root project\nnpm ERR!\nnpm ERR! Could not resolve dependency:\nnpm ERR! peer @angular/common@"^9.0.0" from ng-http-loader@7.0.0\nnpm ERR! node_modules/ng-http-loader\nnpm ERR!   ng-http-loader@"^7.0.0" from the root project\nnpm ERR!\nnpm ERR! Fix the upstream dependency conflict, or retry\nnpm ERR! this command with --force, or --legacy-peer-deps\nnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.\nnpm ERR!\nnpm ERR! See C:\\Users\\myuser\\AppData\\Local\\npm-cache\\eresolve-report.txt for a full report.\n\nnpm ERR! A complete log of this run can be found in:\nnpm ERR!     C:\\Users\\myuser\\AppData\\Local\\npm-cache\\_logs\\2022-07-20T16_52_29_241Z-debug-0.log\n\xc3\x97 Packages installation failed, see above.\n

\n

编辑2：响应@Alex的回答，升级依赖项后我收到此错误

\n

> ng add @angular-eslint/schematics\nYour global Angular CLI version (14.0.5) is greater than your local version (13.2.6). The local Angular CLI version is used.\n\nTo disable this warning use "ng config -g cli.warnings.versionMismatch false".\ni Using package manager: npm\n\xe2\x88\x9a Found compatible package version: @angular-eslint/schematics@13.5.0.\n\xe2\x88\x9a Package information loaded.\n\nThe package @angular-eslint/schematics@13.5.0 will be installed and executed.\nWould you like to proceed? Yes\nnpm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.\nnpm ERR! code ERESOLVE\nnpm ERR! ERESOLVE could not resolve\nnpm ERR!\nnpm ERR! While resolving: @angular/compiler-cli@13.2.7\nnpm ERR! Found: @angular/compiler@13.3.0\nnpm ERR! node_modules/@angular/compiler\nnpm ERR!   peer @angular/compiler@"13.3.0" from @angular/platform-browser-dynamic@13.3.0\nnpm ERR!   node_modules/@angular/platform-browser-dynamic\nnpm ERR!     @angular/platform-browser-dynamic@"^13.2.6" from the root project\nnpm ERR!   @angular/compiler@"^13.2.6" from the root project\nnpm ERR!\nnpm ERR! Could not resolve dependency:\nnpm ERR! peer @angular/compiler@"13.2.7" from @angular/compiler-cli@13.2.7\nnpm ERR! node_modules/@angular/compiler-cli\nnpm ERR!   peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/build-angular@13.2.6\nnpm ERR!   node_modules/@angular-devkit/build-angular\nnpm ERR!     dev @angular-devkit/build-angular@"~13.2.5" from the root project\nnpm ERR!   peer @angular/compiler-cli@"^13.0.0" from @ngtools/webpack@13.2.6\nnpm ERR!   node_modules/@ngtools/webpack\nnpm ERR!     @ngtools/webpack@"13.2.6" from @angular-devkit/build-angular@13.2.6\nnpm ERR!     node_modules/@angular-devkit/build-angular\nnpm ERR!       dev @angular-devkit/build-angular@"~13.2.5" from the root project\nnpm ERR!   1 more (the root project)\nnpm ERR!\nnpm ERR! Conflicting peer dependency: @angular/compiler@13.2.7\nnpm ERR! node_modules/@angular/compiler\nnpm ERR!   peer @angular/compiler@"13.2.7" from @angular/compiler-cli@13.2.7\nnpm ERR!   node_modules/@angular/compiler-cli\nnpm ERR!     peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/build-angular@13.2.6\nnpm ERR!     node_modules/@angular-devkit/build-angular\nnpm ERR!       dev @angular-devkit/build-angular@"~13.2.5" from the root project\nnpm ERR!     peer @angular/compiler-cli@"^13.0.0" from @ngtools/webpack@13.2.6\nnpm ERR!     node_modules/@ngtools/webpack\nnpm ERR!       @ngtools/webpack@"13.2.6" from @angular-devkit/build-angular@13.2.6\nnpm ERR!       node_modules/@angular-devkit/build-angular\nnpm ERR!         dev @angular-devkit/build-angular@"~13.2.5" from the root project\nnpm ERR!     1 more (the root project)\nnpm ERR!\nnpm ERR! Fix the upstream dependency conflict, or retry\nnpm ERR! this command with --force, or --legacy-peer-deps\nnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.\nnpm ERR!\n\nnpm ERR! A complete log of this run can be found in:\n

\n

编辑3：这是我运行@Mohammed.Kotkotly的答案时得到的错误......

\n

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

\n

Answer 1

尝试执行以下步骤。它应该解决问题。

1. 创建一个全新的 Angular 项目。使用与当前项目相同的特殊设置，例如，如果您使用 scss 作为样式。
2. 使用命令添加 lint 原理图ng add @angular-eslint/schematics。它应该完全适当。
3. 如果您使用的是 Angular Material，还可以使用该命令对其进行配置ng add @angular/material。
4. 在此处安装当前项目使用的依赖项。

就像查看您的 package.json，然后比较您的项目具有而这些新项目没有的依赖项，然后安装它们。就像是

npm install dep1 dep2 dep3 ...

其中 dep 表示依赖。这样做，以便 npm 可以重新配置依赖项版本。

5. 将项目中的.git和文件夹复制到这个新项目中。src这样做以便您可以从结束的地方继续编码。

在所有条件相同的情况下，您应该只对项目的配置文件进行轻微的更改（angular.json、package.json、package-lock.json，...）并且一切都应该正常工作。您现在应该开始从这个新的（变旧的）项目开始工作

当我尝试使用ng add @nguniversal/express-engine. 我一直像你一样遇到依赖冲突错误，直到我执行上述操作。

旧答案

这个问题确实不是来自 Angular（也不是原理图 linter），而是来自 NPM。

要解决该问题，请删除package-lock.json和node_modules。再次运行npm install。然后运行原理图命令。

删除package-lock.json通常可以解决这个问题，因为现有的package-lock.json可能会阻止 NPM 正确排序依赖项和版本。因此，间接依赖项深处的版本更新可能会发生冲突并导致此错误。