Currently I'm working through an app that has been abandoned by the developers. The client was getting no response from the dev company, when they asked if I could have a look. The app hadn't been updated for 18 months. So of course, a product that hasn't been updated in that timeframe is going to have a suite of npm update issues / conflicts.
What is the difference between dependancy and devDependancy packages?
When you install an npm package using npm install <package-name>, you are installing it as a dependency. The package is automatically listed in the package.json file, under the dependencies list. This has been the way since npm 5.
Development dependencies are intended as development-only packages, that are not required in production. For example testing packages, webpack or Babel. To add a package as a devDepenancy you need to add the -D flag, or --save-dev, you are installing it as a development dependency, which adds it to the devDependencies list. By way of example
npm i -D ts-node
When you go in production, if you type npm install and the folder contains a package.json file, they are installed, as npm assumes this is a development deploy.
You need to set the --production flag (npm install --production) to avoid installing those development dependencies.
As a reference below is a sample of my package.json file
"dependencies": {
"@angular/common": "^13.3.0",
"@angular/core": "^13.3.0",
"@angular/fire": "^7.3.0",
"@angular/forms": "^13.3.0",
"@angular/platform-browser": "^13.3.0",
"@angular/platform-browser-dynamic": "^13.3.0",
"@angular/pwa": "^13.3.0",
"@angular/router": "^13.3.0",
"@angular/service-worker": "^13.3.0",
"@asymmetrik/ngx-leaflet": "^13.0.2",
"@capacitor/android": "^3.4.3",
"@capacitor/app": "1.1.1",
"@capacitor/core": "3.4.3",
"@capacitor/haptics": "1.1.4",
"@capacitor/ios": "3.4.3",
"@capacitor/keyboard": "1.2.2",
"@capacitor/status-bar": "1.0.8",
"@ionic-native/core": "^5.36.0",
"@ionic-native/http": "^5.36.0",
"@ionic-native/splash-screen": "^5.36.0",
"@ionic-native/status-bar": "^5.36.0",
"@ionic/angular": "^6.0.13",
"@ionic/storage": "^3.0.6",
"core-js": "^3.21.1",
"D": "^1.0.0",
"firebase": "^9.6.9",
"leaflet": "^1.7.1",
"tslib": "^2.3.1",
"zone.js": "^0.11.5"
},
"devDependencies": {
"@capacitor/cli": "3.4.3",
"protractor": "^7.0.0",
"ts-node": "^10.7.0",
"typescript": "^4.6.2"
},
Overview of npm options
Use outdated to discover dependencies that are out of date
npm outdated
Use update to perform safe dependency upgrades
npm update
Use install <packagename>@latest to upgrade to the latest major version of a package
npm install <packagename>@latest
Use npx npm-check-updates -u and npm install to upgrade all dependencies to their latest major versions
npx npm-check-updates -u npm install