How to update all npm packages in a medium/advanced project? - npm

Question

I'm trying to update Angular from version 11 to 12 and I'm following this tutorial: https://update.angular.io/?l=3&v=11.0-12.0
When I launch this command ng update #angular/core#12 #angular/cli#12 on the terminal I have this message:
✔ Package successfully installed.
Using package manager: 'npm'
Collecting installed dependencies...
Found 0 dependencies.
Package '#angular/core' is not a dependency.
I can't resolve in noway, nothing change in my package.json. I'm tryng to update with npm i #angular/core#12 npi i #angular/cli#12, it works but when I'm going to install all packages in my package.json I have a lot of problem with dependency like this:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: poc-architecture-angular#0.0.0
npm ERR! Found: #angular/common#12.1.5
npm ERR! node_modules/#angular/common
npm ERR! #angular/common#"~12.1.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #angular/common#">=11.0.0 <12.0.0" from #ng-select/ng-select#6.1.0
npm ERR! node_modules/#ng-select/ng-select
npm ERR! #ng-select/ng-select#"^6.1.0" 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 /home/andrea/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/andrea/.npm/_logs/2021-09-06T13_14_09_645Z-debug.log
I would to update Angular and after that all the outdated packages but I can't. Is something wrong? I tried also with npx npm-check-updates -u but with same dependencies issues.
This is my package.json:
{
"name": "poc-architecture-angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --port 4200",
"build": "NODE_ENV=production ng build --prod",
"build:dev": "NODE_ENV=production ng build --source-map=true --prod",
"build:local": "ng build --watch --output-path /usr/share/nginx/html && tar -zcvf archive.tar.gz dist/prod/*",
"test": "ng test",
"test:coverage": "ng test --no-watch --code-coverage --browsers ChromeHeadlessNoSandbox",
"lint": "ng lint",
"e2e": "ng e2e",
"stylelint": "stylelint --fix \"src/**/*.scss\" --config .stylelintrc.json",
"stylelint:diff": "stylelint \"src/**/*scss\" --config .stylelintrc.json",
"format": "prettier --write \"src/app/**/*.{ts,html,scss}\"",
"format:diff": "prettier --list-different \"src/app/**/*.{ts,html,scss}\"",
"analize": "ng build --prod --stats-json && node_modules/.bin/webpack --json | webpack-bundle-analyzer ./dist/poc-architecture-angular/stats.json",
"compodoc": "./node_modules/.bin/compodoc -p ./tsconfig.base.json -w -s --language=it-IT -r 8081",
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
"storybook": "npm run docs:json && start-storybook -p 9001 --quiet -c .storybook",
"build-storybook": "npm run docs:json && build-storybook",
"cypress:open-local": "cypress open --config baseUrl=http://localhost:4200",
"cypress:run-local": "cypress run --config baseUrl=http://localhost:4200",
"sonar": "sonar-scanner"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/app/**/*.{ts,html,scss}": [
"prettier --write"
]
},
"exports": {
"./": "./*"
},
"private": true,
"dependencies": {
"#angular/animations": "~12.1.4",
"#angular/cdk": "^11.2.12",
"#angular/common": "~12.1.4",
"#angular/compiler": "^12.1.4",
"#angular/core": "^12.1.5",
"#angular/forms": "~12.1.4",
"#angular/material": "^11.2.12",
"#angular/platform-browser": "~12.1.4",
"#angular/platform-browser-dynamic": "~12.1.4",
"#angular/router": "~12.1.4",
"#fullcalendar/angular": "^5.5.0",
"#fullcalendar/core": "^5.5.1",
"#fullcalendar/daygrid": "^5.5.0",
"#fullcalendar/interaction": "^5.5.0",
"#ng-select/ng-select": "^6.1.0",
"#ngrx/effects": "^11.1.1",
"#ngrx/router-store": "^11.1.1",
"#ngrx/store": "^11.1.1",
"#ngrx/store-devtools": "^11.1.1",
"#storybook/preset-scss": "^1.0.3",
"chart.js": "^2.9.3",
"filesize": "^6.1.0",
"hammerjs": "^2.0.8",
"i": "^0.3.6",
"lodash-es": "^4.17.20",
"luxon": "^1.26.0",
"moment": "^2.29.1",
"ng2-date-picker": "^11.0.0",
"ng2-pdf-viewer": "^6.4.1",
"ngrx-store-localstorage": "^11.0.0",
"ngx-cookie-service": "^11.0.2",
"ngx-infinite-scroll": "^10.0.1",
"ngx-webstorage": "^7.0.1",
"npm": "^7.22.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^12.2.2",
"#angular/cli": "^12.2.4",
"#angular/compiler-cli": "^12.1.4",
"#babel/core": "^7.13.10",
"#compodoc/compodoc": "^1.1.11",
"#ngrx/schematics": "^11.1.1",
"#storybook/addon-actions": "^6.1.21",
"#storybook/addon-backgrounds": "^6.1.21",
"#storybook/addon-docs": "^6.1.21",
"#storybook/addon-knobs": "^6.1.21",
"#storybook/addon-links": "^6.1.21",
"#storybook/addon-storysource": "^6.1.21",
"#storybook/addon-viewport": "^6.1.21",
"#storybook/angular": "^6.1.21",
"#types/faker": "^5.1.7",
"#types/fs-extra": "^5.0.2",
"#types/jasmine": "^3.5.14",
"#types/jasminewd2": "~2.0.3",
"#types/lodash": "^4.14.168",
"#types/luxon": "^1.26.3",
"#types/node": "^12.12.54",
"autoprefixer": "^10.0.1",
"babel-loader": "^8.2.2",
"codelyzer": "^6.0.0",
"css-loader": "^4.3.0",
"cypress": "^7.6.0",
"faker": "^5.1.0",
"husky": "^4.3.8",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"lint-staged": "^10.5.4",
"ng-packagr": "^12.2.1",
"postcss": "^8.1.0",
"postcss-loader": "^4.0.2",
"prettier": "^2.2.1",
"protractor": "~7.0.0",
"puppeteer": "~8.0.0",
"sass-loader": "^10.0.2",
"sonarqube-scanner": "2.8.0",
"style-loader": "^1.2.1",
"stylelint": "^13.6.1",
"stylelint-config-sass-guidelines": "^7.0.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-order": "^4.1.0",
"stylelint-scss": "^3.18.0",
"tailwindcss": "^2.2.6",
"tailwindcss-multi-column": "^1.0.2",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"tslint-config-prettier": "^1.18.0",
"typescript": "~4.3.5",
"webpack-bundle-analyzer": "^3.9.0",
"webpack-cli": "^4.5.0"
}
}

Answer 1

Navigate to the root directory of your project and ensure it contains a package.json file:
cd /path/to/project
In your project root directory, run the update command:
npm update
To test the update, run the outdated command. There should not be any output.
npm outdated
Update globally-installed packages. If you are using npm version 2.6.0 or earlier, run this command to update all outdated global packages:
npm install npm#latest -g
However, please consider upgrading to the latest version of npm.