新建Angular13项目npm报ajv对等依赖缺失问题咨询

问题背景 #

• 执行npx @angular/cli@13 new Ubisoft.SupplierPortalNext.Spa全新创建Angular 13项目后，运行npm install出现如下警告：

npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.

• 执行npm ls --depth 0校验依赖，重复3次提示对等依赖缺失：

npm ERR! peer dep missing: ajv@^6.9.1, required by ajv-keywords@3.5.2
npm ERR! peer dep missing: ajv@^6.9.1, required by ajv-keywords@3.5.2
npm ERR! peer dep missing: ajv@^6.9.1, required by ajv-keywords@3.5.2

• 执行npm ls ajv-keywords查询依赖树，可见ajv-keywords被多个构建链路依赖引用，同时存在3.5.2和5.1.0两个版本，分别对应不同的ajv主版本要求：

`-- @angular-devkit/build-angular@13.3.8
  +-- babel-loader@8.2.5
  | `-- schema-utils@2.7.1
  |   `-- ajv-keywords@3.5.2
  +-- copy-webpack-plugin@10.2.1
  | `-- schema-utils@4.0.0
  |   `-- ajv-keywords@5.1.0
  +-- mini-css-extract-plugin@2.5.3
  | `-- schema-utils@4.0.0
  |   `-- ajv-keywords@5.1.0
  +-- webpack@5.70.0
  | +-- schema-utils@3.1.1
  | | `-- ajv-keywords@3.5.2  deduped
  | `-- terser-webpack-plugin@5.3.3
  |   `-- schema-utils@3.1.1
  |     `-- ajv-keywords@3.5.2  deduped
  +-- webpack-dev-middleware@5.3.0
  | `-- schema-utils@4.0.0
  |   `-- ajv-keywords@5.1.0
  `-- webpack-dev-server@4.7.3
    `-- schema-utils@4.0.0
      `-- ajv-keywords@5.1.0

• 初始状态下，默认配置ng serve、localprod配置（本地AOT构建校验可用性）的ng serve均能在默认模板项目上正常运行。
• 尝试按照警告提示手动安装ajv@^6.9.1后，出现新的版本依赖警告：

npm WARN ajv-keywords@5.1.0 requires a peer of ajv@^8.8.2 but none is installed. You must install peer dependencies yourself.

同时ng serve直接崩溃，抛出找不到模块的错误：

An unhandled exception occurred: Cannot find module 'ajv/dist/compile/codegen'
Require stack:
- <myproject>\node_modules\webpack-dev-server\node_modules\ajv-keywords\dist\definitions\typeof.js
- <myproject>\node_modules\webpack-dev-server\node_modules\ajv-keywords\dist\keywords\typeof.js
- <myproject>\node_modules\webpack-dev-server\node_modules\ajv-keywords\dist\keywords\index.js
- <myproject>\node_modules\webpack-dev-server\node_modules\ajv-keywords\dist\index.js
- <myproject>\node_modules\webpack-dev-server\node_modules\schema-utils\dist\validate.js
- <myproject>\node_modules\webpack-dev-server\node_modules\schema-utils\dist\index.js
- <myproject>\node_modules\webpack-dev-server\lib\Server.js
- <myproject>\node_modules\@angular-devkit\build-webpack\src\webpack-dev-server\index.js
- <myproject>\node_modules\@angular-devkit\build-webpack\src\index.js
- <myproject>\node_modules\@angular-devkit\build-angular\src\builders\dev-server\index.js
- <myproject>\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
- <myproject>\node_modules\@angular-devkit\architect\node\index.js
- <myproject>\node_modules\@angular\cli\models\architect-command.js
- <myproject>\node_modules\@angular\cli\commands\serve-impl.js
- <myproject>\node_modules\@angular-devkit\schematics\tools\export-ref.js
- <myproject>\node_modules\@angular-devkit\schematics\tools\index.js
- <myproject>\node_modules\@angular\cli\utilities\json-schema.js
- <myproject>\node_modules\@angular\cli\models\command-runner.js
- <myproject>\node_modules\@angular\cli\lib\cli\index.js
- <myproject>\node_modules\@angular\cli\lib\init.js

结论 #

只要ng serve启动、生产构建、项目核心业务功能运行全部正常，这个警告可以直接忽略，不需要做任何额外处理。

原因说明 #

• 这个警告是npm对等依赖校验的常见误报。Angular 13配套的webpack构建链中，不同插件依赖的schema-utils版本不一致，分别对应ajv-keywords@3.x和ajv-keywords@5.x两个大版本，两个版本要求的ajv主版本完全不兼容。这些依赖包自身的嵌套node_modules目录下已经内置了自己需要的对应ajv版本，运行时不会出现依赖缺失问题。
• 手动在项目根目录安装单一版本ajv反而会破坏npm的依赖查找逻辑：高版本的ajv-keywords会优先读取根目录安装的低版本ajv，直接触发模块找不到的崩溃，之前遇到的启动报错就是这个原因导致的。
• 这类根目录层面的对等依赖告警不会引发隐性故障，npm的告警只是提示根目录没有找到符合版本要求的包，不代表实际运行时依赖真的缺失。

误操作回退方法 #

如果已经手动安装过ajv导致启动报错，按以下步骤回退即可恢复正常：

• 删除项目根目录下的node_modules文件夹和package-lock.json文件
• 重新执行npm install安装依赖
• 不要手动安装任何版本的ajv相关包，保持Angular CLI初始生成的依赖配置即可。

内容的提问来源于stack exchange，提问作者Alexei - check Codidact