Angular 13, errors when trying to instal nguniversal/express-engine

user_1351452 0
Viewed 1795

When trying to add express-engine

ng add @nguniversal/express-engine

I get these errors:

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

When tring with --force it breaks the application.

I recently upgraded the entire project from Angular 11 to 13.

I was trying to upgrade @angular/animations to ^13.1.1, but also errors.

I also have tried removing all Node_modules and installing them again.

Here is my 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"
  }
}

UPDATE

When I downgraded npm to version 7.5.6 (from 8), now I'm getting this error:

Cannot destructure property 'name' of 'node' as it is null.
angular express
2 Answers

The reason is that the modules in your package.json file are not the latest version and incompatible with the latest version of Angular Express Engine, which you are trying to install.

This can be solved in several ways, for example:

1. Manually update

  1. Replace the following lines in package.json:
    "dependencies": {    
            "@angular/common": "~13.1.3",
            "@angular/compiler": "~13.1.3",
            "@angular/core": "~13.1.3",
            "@angular/forms": "~13.1.3",
            "@angular/platform-browser": "~13.1.3",
            "@angular/platform-browser-dynamic": "~13.1.3",
            "@angular/router": "~13.1.3",
             ...

 "devDependencies": {
        "@angular-devkit/build-angular": "~13.1.4",
        "@angular/cli": "~13.1.4",
        "@angular/compiler-cli": "~13.1.3",
        "@types/jasmine": "~3.10.3",
        "@types/node": "^13.11.1",
        "jasmine-core": "~3.10.0",
         ...
  1. Then remove node_modules, package-lock.json
  2. Try running npm i

But it's fine for a new or small project. And in your case, there may be additional conflicts with modules that will have to be resolved.

2. Automatically update all modules

Run the following commands:

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

Now you can run ng add @nguniversal/express-engine without problems

user_155629470

To hack this, you need to code as below:

npm install @nguniversal/express-engine --legacy-peer-deps

After it will install node_modules but not required files. To do this:

ng add @nguniversal/express-engine

This will say "The package already installed". Ignore this and wait to see required SSR files.

user_157795410
Related