添加 Angular SSR 抛出错误发生未处理的异常：npm ERR！ 代码 ERESOLVE

Question

我正在尝试按照文档中此处列出的步骤将服务器端渲染添加到我的应用程序中

第一步是运行

ng add @nguniversal/express-engine

不幸的是，这会引发以下错误

An unhandled exception occurred: npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: angular-dark-light@0.0.0
npm ERR! Found: @angular/animations@11.1.2
npm ERR! node_modules/@angular/animations
npm ERR!   @angular/animations@"~11.1.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/animations@"11.2.4" from @angular/platform-server@11.2.4
npm ERR! node_modules/@angular/platform-server
npm ERR!   peer @angular/platform-server@"^11.1.2" from @nguniversal/express-engine@11.1.2
npm ERR!   node_modules/@nguniversal/express-engine
npm ERR!     @nguniversal/express-engine@"11.1.2" 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\KOTIENO1\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\KOTIENO1\AppData\Local\npm-cache\_logs\2021-03-08T13_41_15_774Z-debug.log
Package install failed, see above.
See "C:\Users\KOTIENO1\AppData\Local\Temp\ng-m8ttIF\angular-errors.log" for further details.

我尝试使用--force运行命令，但抛出相同的错误

下面是我的package.json文件

{
  "name": "angular-dark-light",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.1.1",
    "@angular/cdk": "^11.2.3",
    "@angular/common": "~11.1.1",
    "@angular/compiler": "~11.1.1",
    "@angular/core": "~11.1.1",
    "@angular/forms": "~11.1.1",
    "@angular/material": "^11.2.3",
    "@angular/platform-browser": "~11.1.1",
    "@angular/platform-browser-dynamic": "~11.1.1",
    "@angular/router": "~11.1.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1101.2",
    "@angular-eslint/builder": "1.2.0",
    "@angular-eslint/eslint-plugin": "1.2.0",
    "@angular-eslint/eslint-plugin-template": "1.2.0",
    "@angular-eslint/schematics": "1.2.0",
    "@angular-eslint/template-parser": "1.2.0",
    "@angular/cli": "~11.1.2",
    "@angular/compiler-cli": "~11.1.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.3.0",
    "@typescript-eslint/parser": "4.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.1.2"
  }
}

我该如何解决这个问题？

Answer 1

我解决了这个问题。 The problem was not related to @angular/universal rather npm packages mismatch between the installed and the package version on package.json

为了解决我按照以下步骤

1. 运行npm install --force
2. 运行ng add @nguniversal/express-engine