Confusion with npm dependencies

Ionic Framework ionic-v3
1

I always get confused with the npm packages and dependencies.

I am trying to install the latest version of @angular-devkit/build-angular , it gives me this error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: org.apache.cordova.newapp@1.0.0
npm ERR! Found: @angular/compiler@13.2.2
npm ERR! node_modules/@angular/compiler
npm ERR! dev @angular/compiler@“^13.2.2” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@“8.2.14” from @angular/compiler-cli@8.2.14
npm ERR! node_modules/@angular/compiler-cli
npm ERR! dev @angular/compiler-cli@“^8.2.14” 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 /Users/glenelkins/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/glenelkins/.npm/_logs/2022-02-09T18_01_06_348Z-debug-0.log

I clearly don’t understand what this is saying, the first error mentions compiler@13.2.2 yet my package.json says: “@angular/compiler”: “^13.2.2”

So why is it complaining about this if i have it installed? Same with compiler-cli, i have version 8.2.14??

Could someone break down what this is telling me? I’m a php developer for the most part, i use composer, but npm just confuses me. All i want is the latest @angular-devkit/build-angular to install

Here is the package.json:

{
  "name": "org.apache.cordova.newapp",
  "displayName": "frontend",
  "version": "1.0.0",
  "description": "A sample Apache Cordova application that responds to the deviceready event.",
  "main": "index.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-prod": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.2.5",
    "@angular/common": "^8.2.10",
    "@angular/core": "^8.2.10",
    "@angular/forms": "^8.2.14",
    "@angular/http": "^7.2.16",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "^8.2.10",
    "@angular/platform-browser-dynamic": "^8.2.10",
    "@angular/router": "^8.2.10",
    "@awesome-cordova-plugins/core": "^5.37.3",
    "@awesome-cordova-plugins/diagnostic": "^5.37.3",
    "@awesome-cordova-plugins/ionic-webview": "^5.37.3",
    "@awesome-cordova-plugins/media-capture": "^5.37.3",
    "@awesome-cordova-plugins/photo-viewer": "^5.38.0",
    "@ionic-native/in-app-browser": "^5.36.0",
    "@ionic/angular": "^5.9.3",
    "@ionic/core": "^5.8.4",
    "@ng-bootstrap/ng-bootstrap": "^5.3.1",
    "angular-linky": "^1.2.2",
    "angular-password-strength-meter": "^3.0.1",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "date-fns": "^2.25.0",
    "emoji-js": "^3.6.0",
    "flatpickr": "^4.6.9",
    "hammerjs": "^2.0.8",
    "ionicons": "^5.5.3",
    "jquery": "^3.6.0",
    "ng-socket-io": "^0.2.4",
    "ng2-file-upload": "^1.4.0",
    "ngb-modal": "^2.0.3",
    "ngx-emoji-picker": "0.0.2",
    "ngx-file-drop": "^10.1.1",
    "ngx-image-cropper": "^3.3.5",
    "ngx-infinite-scroll": "^9.1.0",
    "ngx-ui-loader": "^8.0.0",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "socket.io-client": "^2.4.0",
    "tslib": "^1.14.1",
    "ws": "^7.5.5",
    "zone.js": "~0.9.1",
    "zxcvbn3": "^0.1.1"
  },
  "devDependencies": {
    "@angular/cli": "^8.3.29",
    "@angular/compiler": "^13.2.2",
    "@angular/compiler-cli": "^8.2.14",
    "@angular/language-service": "^8.2.10",
    "@ionic/angular-toolkit": "latest",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "com-sarriaroman-photoviewer": "^1.2.5",
    "cordova-android": "^9.1.0",
    "cordova-ios": "^6.2.0",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "2.4.2",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-plugin-x-toast": "^2.7.3",
    "cordova.plugins.diagnostic": "^6.1.0",
    "es6-promise-plugin": "^4.2.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  },
  "keywords": [
    "ecosystem:cordova"
  ],
  "author": "Apache Cordova Team",
  "license": "Apache-2.0",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-x-socialsharing": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-media-capture": {},
      "cordova.plugins.diagnostic": {},
      "cordova-plugin-x-toast": {},
      "com-sarriaroman-photoviewer": {}
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}
2

The entire point of dependency management is making sure that you have compatible versions of things. To that end, generally speaking, all components in the same “family” (@angular/* in this instance) must have the same major version.

The package.json you posted has a mixture of 7, 8, and 10 in it already, and now you are trying to add 13 to the mix. That is never going to work. You need to pick one major version and align every single @angular/* package to it. That should make npm stop complaining.

3

Thanks for the answer. It’s more that when it does complain it never actually explains what the issue is.

Does this also apply to @ionic/ packages? Make them all the same version?

4

my experience, especially with angular, is that it is better to use the upgrade guides and the angular schematics to do things. update.angular.io. And in fact, many angular related libraries rely on the angular schematics way of upgrading using “ng” command.

Generally, I really only use npm to upgrade if I am sure there is no upgrade guide or if it is really recommended by the package owner.

5

In general, it applies to all “families”, so yes, align all @ionic/* and all @awesome-cordova-plugins/* to the same major version.

6

Since there is no ‘align’ command what ARE you asking the poster to do?

Should they npm install or upgrade something?
Should they follow some updating instructions?
Should they edit their package.json?

Maybe the poster understands what is meant by ‘align’ since you used it twice, but I have no clue.
Could you explain?

7

I didn’t want to stomp on @Tommertom’s advice about using upgrades guides, which is good. Personally, I use a combination of npm update and manually editing package.json, but I’m agnostic about how one goes about managing the nuts and bolts.

The important thing is that at the end of the day, the first number in the version of every package in a @foo/* family of dependencies needs to be identical.

1 Like