Angular 13，尝试安装 nguniversal/express-engine 时出错

Question

当尝试添加express-engine时

ng add @nguniversal/express-engine

我收到这些错误：

The package @nguniversal/express-engine@13.0.1 will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: nine-gold-workspace@0.0.0
npm ERR! Found: @angular/common@13.1.0
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^13.0.0 || ^14.0.0-0" from @angular/cdk@13.1.0
npm ERR!   node_modules/@angular/cdk
npm ERR!     @angular/cdk@"^13.1.0" from the root project
npm ERR!   peer @angular/common@"13.1.0" from @angular/forms@13.1.0
npm ERR!   node_modules/@angular/forms
npm ERR!     @angular/forms@"^13.1.0" from the root project
npm ERR!   8 more (@angular/platform-browser, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @nguniversal/express-engine@"13.0.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/common@13.1.1
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"13.1.1" from @angular/platform-server@13.1.1
npm ERR!   node_modules/@angular/platform-server
npm ERR!     peer @angular/platform-server@"^13.0.1" from @nguniversal/express-engine@13.0.1
npm ERR!     node_modules/@nguniversal/express-engine
npm ERR!       @nguniversal/express-engine@"13.0.1" from the root project

当使用 --force 进行尝试时，它会破坏应用程序。

我最近将整个项目从 Angular 11 升级到 13。

我试图将 @angular/animations 升级到 ^13.1.1，但也出现错误。

我还尝试删除所有 Node_modules 并再次安装它们。

这是我的 package.json：

{
  "name": "nine-gold-workspace",
  "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": {
    "@agm/core": "^3.0.0-beta.0",
    "@agm/snazzy-info-window": "^3.0.0-beta.0",
    "@angular/animations": "^13.1.0",
    "@angular/cdk": "^13.1.0",
    "@angular/common": "^13.1.0",
    "@angular/compiler": "^13.1.0",
    "@angular/core": "^13.1.0",
    "@angular/forms": "^13.1.0",
    "@angular/platform-browser": "^13.1.0",
    "@angular/platform-browser-dynamic": "^13.1.0",
    "@angular/router": "^13.1.0",
    "@fortawesome/angular-fontawesome": "^0.6.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-brands-svg-icons": "^5.15.2",
    "@fortawesome/free-regular-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@ng-select/ng-select": "^4.0.4",
    "@ngstack/code-editor": "3.0.0",
    "@types/file-saver": "1.3.0",
    "@wizdm/animate": "3.1.0",
    "bootstrap": "^4.6.0",
    "file-saver": "^2.0.5",
    "google-libphonenumber": "^3.2.21",
    "intl-tel-input": "^17.0.3",
    "jwt-decode": "3.1.2",
    "monaco-editor": "^0.21.3",
    "ng-recaptcha": "^5.0.0",
    "ng-sidebar": "^9.4.2",
    "ng2-tooltip-directive": "^2.9.22",
    "ngx-bootstrap": "^6.0.0",
    "ngx-countdown": "^12.0.1",
    "ngx-intl-tel-input": "^3.1.1",
    "ngx-mask": "^9.1.4",
    "ngx-monaco-editor": "^9.0.0",
    "ngx-toastr": "^12.1.0",
    "ngx-tooltip": "0.0.9",
    "oidc-client": "1.11.5",
    "rxjs": "~6.6.6",
    "snazzy-info-window": "^1.1.1",
    "ts-loader": "^7.0.5",
    "tslib": "^2.3.1",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "9.1.0",
    "@angular-devkit/build-angular": "^13.1.1",
    "@angular/cli": "^13.1.1",
    "@angular/compiler-cli": "^13.1.0",
    "@angular/language-service": "^13.1.0",
    "@compodoc/compodoc": "^1.1.11",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.20.4",
    "codelyzer": "^6.0.0",
    "css-loader": "^3.6.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.9",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "less": "^3.13.1",
    "less-loader": "^5.0.0",
    "ng-packagr": "^13.1.1",
    "protractor": "~7.0.0",
    "style-loader": "^1.3.0",
    "ts-node": "~8.3.0",
    "tsconfig-paths-webpack-plugin": "^3.3.0",
    "tslint": "^6.1.3",
    "typescript": "~4.5.4",
    "webpack": "4.42.1",
    "webpack-cli": "3.3.11",
    "webpack-dev-server": "3.10.3"
  }
}

---

更新

当我将 npm 降级到版本 7.5.6（从 8）时，现在我收到此错误：

Cannot destructure property 'name' of 'node' as it is null.

Answer 1

原因是 package.json 文件中的模块不是最新版本，并且与您尝试安装的最新版本的 Angular Express Engine 不兼容。

这可以通过多种方式解决，例如：

1.手动更新

1. 替换 package.json 中的以下行：

    “依赖项”：{    
            “@Angular/common”：“~13.1.3”，
            “@角度/编译器”：“〜13.1.3”，
            “@角/核心”：“〜13.1.3”，
            “@角度/形式”：“〜13.1.3”，
            "@angular/platform-b​​rowser": "~13.1.3",
            "@angular/platform-b​​rowser-dynamic": "~13.1.3",
            “@角度/路由器”：“〜13.1.3”，
             ...

 “开发依赖项”：{
        "@angular-devkit/build-angular": "~13.1.4",
        “@角度/cli”：“〜13.1.4”，
        "@angular/compiler-cli": "~13.1.3",
        "@types/jasmine": "~3.10.3",
        "@types/node": "^13.11.1",
        "茉莉花核心": "~3.10.0",
         ...

2. 然后删除node_modules，package-lock.json
3. 尝试跑步npm i

但对于新项目或小型项目来说这很好。就您的情况而言，模块之间可能存在其他冲突，必须予以解决。

2.自动更新所有模块

运行以下命令：

npm install -g npm-check-updates
ncu -u
npm update

现在你可以ng add @nguniversal/express-engine毫无问题地运行了