Develop Reference

NPM error, could not resolve dependency and conflicting peer dependency

I have trouble deploying my project on netlify because of NPM errors.
These are my dependencies.
"dependencies": {
"#angular/animations": "~15.1.1",
"#angular/cdk": "^15.1.2",
"#angular/common": "~15.1.1",
"#angular/compiler": "~15.1.1",
"#angular/core": "~15.1.1",
"#angular/forms": "~15.1.1",
"#angular/localize": "~15.1.1",
"#angular/platform-browser": "~15.1.1",
"#angular/platform-browser-dynamic": "~15.1.1",
"#angular/router": "~15.1.1",
"#angular/service-worker": "~15.1.1",
"#googlemaps/markerclustererplus": "^1.2.3",
"#ngx-translate/core": "^13.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#uiowa/digit-only": "^2.3.0",
"angular-svg-icon": "^12.0.0",
"broadcast-channel": "^4.2.0",
"date-fns": "^2.25.0",
"hammerjs": "^2.0.8",
"ngx-device-detector": "^3.0.0",
"ngx-image-cropper": "^5.0.1",
"ngx-progressbar": "^6.1.1",
"primeflex": "^3.0.1",
"primeicons": "^4.1.0",
"primeng": "^12.2.0-rc.1",
"rxjs": "~6.6.0",
"tslib": "^2.1.0",
"zone.js": "^0.11.8"
},
"devDependencies": {
"#angular-builders/jest": "^12.1.0",
"#angular-devkit/build-angular": "~15.1.2",
"#angular-eslint/builder": "15.2.0",
"#angular-eslint/eslint-plugin": "15.2.0",
"#angular-eslint/eslint-plugin-template": "15.2.0",
"#angular-eslint/schematics": "15.2.0",
"#angular-eslint/template-parser": "15.2.0",
"#angular/cli": "~15.1.2",
"#angular/compiler-cli": "~15.1.1",
"#biesbjerg/ngx-translate-extract": "^7.0.4",
"#types/googlemaps": "^3.43.3",
"#types/jasmine": "~3.6.0",
"#types/jest": "^26.0.23",
"#types/lodash": "^4.14.172",
"#types/node": "^12.11.1",
"default-passive-events": "^2.0.0",
"eslint": "^8.28.0",
"eslint-plugin-sort-class-members": "^1.11.0",
"eslint-plugin-unused-imports": "^1.1.4",
"husky": "^6.0.0",
"jasmine-core": "~3.7.0",
"jest": "^27.0.5",
"karma-coverage": "~2.0.3",
"lint-staged": "^11.0.0",
"lodash": "^4.17.21",
"npm-run-all": "^4.1.5",
"prettier": "^2.3.1",
"ts-jest": "^29.0.5",
"typescript": "^4.9.4"
}
And when doing a simple "npm install" I get this error:
errors
I have tried looking around and following many guides but nothing seems to work, for eaxample I have already tried: These steps and many other tricks I've found when googling around

reinstall node.js: works with at least version v16.18.0
https://nodejs.org/download/release/v16.18.0/
and then use npm i --force

Error: Module build failed (from ./node_modules/#angular-devkit/build-angular/src/babel/webpack-loader.js):

I was trying to install Angular Material. Then, I got this error. I deleted the node modules and I wrote npm i again. However, it's not working. How can I fix it?
When I want to run app using ng serve, I got this error:
./node_modules/ngx-print/fesm2020/ngx-print.mjs - Error: Module build failed (from ./node_modules/#angular-devkit/build-angular/src/babel/webpack-loader.js):
93 static ɵdir: i0.ɵɵDirectiveDeclaration<NgxPrintDirective, "button[ngxPrint]", never, { "previewOnly": "previewOnly"; "printSectionId": "printSectionId"; "printTitle": "printTitle"; "useExistingCss": "useExistingCss"; "printDelay": "printDelay"; "printStyle": "printStyle"; "styleSheetFile": "styleSheetFile"; }, {}, never, never, false, never>;
package.json:
{
"name": "cuba",
"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": "^1.1.0",
"#angular/animations": "~13.0.3",
"#angular/cdk": "^11.0.1",
"#angular/common": "~13.0.3",
"#angular/compiler": "~13.0.3",
"#angular/core": "~13.0.3",
"#angular/fire": "^5.4.2",
"#angular/forms": "~13.0.3",
"#angular/localize": "~13.0.3",
"#angular/platform-browser": "~13.0.3",
"#angular/platform-browser-dynamic": "~13.0.3",
"#angular/router": "~13.0.3",
"#angular/service-worker": "~13.0.3",
"#asymmetrik/ngx-leaflet": "^7.0.0",
"#auth0/angular-jwt": "^5.1.0",
"#ckeditor/ckeditor5-angular": "^1.2.3",
"#ckeditor/ckeditor5-build-classic": "^20.0.0",
"#ckeditor/ckeditor5-build-inline": "^20.0.0",
"#ctrl/ngx-emoji-mart": "^3.1.0",
"#kolkov/angular-editor": "^1.1.2",
"#ks89/angular-modal-gallery": "^7.2.5",
"#ng-bootstrap/ng-bootstrap": "^6.1.0",
"#ng-select/ng-select": "^4.0.0",
"#ngx-loading-bar/core": "^5.1.0",
"#ngx-loading-bar/http-client": "^5.1.0",
"#ngx-loading-bar/router": "^5.1.0",
"#ngx-translate/core": "^13.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#sweetalert2/ngx-sweetalert2": "^8.1.1",
"#swimlane/ngx-charts": "^14.0.0",
"#swimlane/ngx-datatable": "^17.1.0",
"angular-archwizard": "^6.1.0",
"angular-calendar": "^0.28.16",
"angular-count-to": "0.0.3",
"angular-tree-component": "^8.5.6",
"angular2_photoswipe": "^8.0.1",
"angular2-knob": "^1.1.15",
"angular2-multiselect-dropdown": "^4.6.3",
"angularx-flatpickr": "^6.3.1",
"animate.css": "^4.1.0",
"apexcharts": "^3.19.3",
"bootstrap": "^4.5.2",
"canvasjs": "^1.8.3",
"chart.js": "^2.9.3",
"chartist": "^0.11.4",
"crypto": "^1.0.1",
"crypto-js": "^4.1.1",
"date-fns": "^2.14.0",
"feather-icons": "^4.26.0",
"file-saver": "^2.0.5",
"firebase": "^7.15.5",
"flatpickr": "^4.6.3",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"knob": "^1.1.0",
"leaflet": "^1.6.0",
"mousetrap": "^1.6.5",
"ng-apexcharts": "^1.3.0",
"ng-chartist": "^4.1.0",
"ng-pick-datetime": "^7.0.0",
"ng2-charts": "^2.3.2",
"ng2-dragula": "^2.1.1",
"ng2-google-charts": "^6.0.0",
"ng2-search-filter": "^0.5.1",
"ng5-slider": "^1.2.4",
"ngx-ckeditor": "^8.0.0",
"ngx-cookie-service": "^3.0.3",
"ngx-crystal-gallery": "^1.1.5",
"ngx-datatable": "^1.0.3",
"ngx-dropzone": "^2.5.0",
"ngx-dropzone-wrapper": "^9.0.0",
"ngx-editor": "^5.0.0-alpha.9",
"ngx-image-cropper": "^3.1.9",
"ngx-joyride": "^2.2.11",
"ngx-masonry": "^10.0.0",
"ngx-masonry-gallery": "^3.0.0",
"ngx-owl-carousel-o": "^3.0.1",
"ngx-perfect-scrollbar": "^9.0.0",
"ngx-print": "^1.2.0-beta.5",
"ngx-router-animations": "0.0.9",
"ngx-toastr": "^12.1.0",
"photoswipe": "^4.1.3",
"rxjs": "~6.5.5",
"sweetalert2": "^9.14.4",
"tslib": "^2.0.0",
"xlsx": "^0.18.5",
"xlsx-style": "^0.8.13",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.0.4",
"#angular/cli": "~13.0.4",
"#angular/compiler-cli": "~13.0.3",
"#angular/language-service": "~13.0.3",
"#schematics/angular": "^14.2.1",
"#types/chartist": "^0.9.48",
"#types/crypto-js": "^4.1.1",
"#types/feather-icons": "^4.7.0",
"#types/hammerjs": "^2.0.36",
"#types/jasmine": "~3.5.11",
"#types/jasminewd2": "~2.0.3",
"#types/leaflet": "^1.5.13",
"#types/mousetrap": "^1.6.3",
"#types/node": "^14.18.34",
"codelyzer": "^5.2.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.10.2",
"tslint": "~6.1.0",
"typescript": "~4.4.4"
}
}

if Angular version is from 7.0.0 - 14.1.0
use command npm i ngx-print#1.2.1
if Angular version is >14
use command npm install ngx-print
it works fine for me

vulnerability in node modules in angular application

We have below dependency error in security scan. these are giving vulnearability issue
qs
load-utils
but these dependencies are not in package.json. I have read in google that it can be indirect dependency.
How to check indirect dependency. is there any way to check.
below is my package.json
{
"name": "infy-02",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node app.js",
"build": "ng build --base-href /finnacle-payment/ ",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/cdk": "~8.2.3",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"#fortawesome/angular-fontawesome": "^0.5.0",
"#fortawesome/fontawesome-svg-core": "^1.2.26",
"#fortawesome/free-solid-svg-icons": "^5.12.0",
"#grapecity/wijmo.all": "5.20203.748",
"#grapecity/wijmo.angular2.all": "5.20203.748",
"ansi-html": "0.0.9",
"body-parser": "^1.19.0",
"bootstrap": "^4.5.3",
"classlist.js": "^1.1.20150312",
"cookie-parser": "^1.4.4",
"dd-trace": "2.5.0",
"engine.io": "4.1.2",
"express": "^4.17.1",
"express-session": "^1.17.0",
"hammerjs": "^2.0.8",
"helmet": "^3.21.2",
"ini": "1.3.6",
"jquery": "3.5.1",
"jsonwebtoken": "^8.5.1",
"knex": "^0.20.11",
"minimatch": "3.0.6",
"morgan": "^1.9.1",
"node-forge": "1.0.0",
"passport": "^0.4.1",
"passport-github": "^1.1.0",
"passport-github2": "^0.1.12",
"passport-oauth2": "^1.5.0",
"passport-openidconnect": "0.0.2",
"rxjs": "~6.4.0",
"socket.io-parser": "3.3.2",
"tslib": "^1.10.0",
"wijmo": "5.20203.748",
"winston": "^3.2.1",
"xmlhttprequest-ssl": "1.6.3",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.19",
"#angular/cli": "~8.3.19",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/node": "~8.9.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.1.1",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}
I have tried to search in google but not able to understand on which dependency qs or load-utils are dependent. could you please help on the same.

You can ask npm to explain why a package is needed, directly or indirectly:
$ npm explain qs
If it is an indirect dependency, there is not much you can do about that. You have to wait for the other packages to update their dependencies.
You can however update your own dependencies. This will also update indirect dependencies. For example, Angular is already at version 14 and you are still using Angular 8.

Update angular 5 to 6+ ngx-bootstrap error

I'm trying to update my application from angular 5 to angular 6+.
After updating a lot of packages I have this error and I'm stuck on that.
ERROR in chunk app [entry]
app.bundle.js
/home/sonyde/Documents/project/extranet/node_modules/ngx-bootstrap/esm5/ngx-bootstrap.js dc21e88b40837b73971f9f5c6a9b4b40
Unexpected token (467:27)
| function BsLocaleService() {
| this._defaultLocale = 'en';
| this._locale = new !(function webpackMissingModule() { var e = new Error("Cannot find module 'rxjs'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())(this._defaultLocale);
| this._localeChange = this._locale.asObservable();
| }
ERROR in vendor.bundle.js from UglifyJs
Unexpected token: operator (!) [./node_modules/#angular/core/fesm5/core.js:4463,36][vendor.bundle.js:5560,36]
I updated angular (5.2 to 6.1), webpack (3.12.0 to 4.19.0) and rxjs (5.5.2 to 6.0.0) versions.
I don't think the error comes from uglifyjs because we already tried to remove it and the error is still there, in the console.
Does anyone have any insight on this?
My packages :
"dependencies": {
"#angular/animations": "^6.1.10",
"#angular/cdk": "^6.4.7",
"#angular/cli": "6",
"#angular/common": "^6.1.10",
"#angular/compiler": "^6.1.10",
"#angular/compiler-cli": "^6.1.10",
"#angular/core": "^6.1.10",
"#angular/forms": "^6.1.10",
"#angular/http": "^6.1.10",
"#angular/platform-browser": "^6.1.10",
"#angular/platform-browser-dynamic": "^6.1.10",
"#angular/platform-server": "^6.1.10",
"#angular/router": "^6.1.10",
"#epegzz/sass-vars-loader": "^3.3.1",
"#ngtools/webpack": "6.2.1",
"#ngx-translate/core": "^10.0.2",
"#ngx-translate/http-loader": "^3.0.1",
"#swimlane/ngx-charts": "^9.1.1",
"#types/core-js": "0.9.36",
"#types/jasmine": "2.5.38",
"#types/lodash": "ts2.0",
"#types/node": "6.0.45",
"#types/pdfjs-dist": "2.1.3",
"#types/swiper": "^3.4.3",
"#types/webpack-env": "1.12.1",
"angular2-router-loader": "0.3.4",
"angular2-template-loader": "0.6.0",
"awesome-typescript-loader": "^5.2.1",
"bootstrap-sass": "3.3.7",
"classlist.js": "^1.1.20150312",
"clean-webpack-plugin": "0.1.16",
"codelyzer": "^3.0.1",
"common-models": "2.3.2",
"conventional-changelog-cli": "^1.3.4",
"cookieconsent": "3.0.4",
"copy-webpack-plugin": "^5.0.0",
"core-js": "2.4.1",
"css-loader": "^1.0.1",
"d3": "^4.13.0",
"d3-ng2-service": "^2.2.0",
"deep-extend": "0.4.1",
"dynamic-i18n": "^1.0.5",
"extract-loader": "^5.1.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "^6.2.0",
"flat": "^4.0.0",
"font-awesome": "4.7.0",
"html-webpack-exclude-assets-plugin": "^0.0.7",
"html-webpack-plugin": "3.0.0",
"htmllint": "^0.6.0",
"htmllint-cli": "^0.0.6",
"imagemin-webpack-plugin": "1.4.4",
"intl": "1.2.5",
"loader-utils": "^1.1.0",
"lodash": "4.17.2",
"mini-css-extract-plugin": "^1.3.3",
"mixgen": "1.1.7",
"moment": "^2.20.1",
"moment-range": "^3.0.3",
"ng2-pdf-viewer": "6.1.0",
"ng2-select-compat": "1.3.1",
"ngx-bootstrap": "4.3.0",
"ngx-cookieconsent": "^2.2.3",
"ngx-infinite-scroll": "^10.0.1",
"ngx-order-pipe": "^1.0.2",
"node-sass": "^4.13.1",
"node-sass-json-importer": "^3.0.2",
"parallel-webpack": "3.0.0-alpha.2",
"pdfjs-dist": "2.2.228",
"pretty-checkbox": "^3.0.3",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.8",
"release-it": "^10.0.0",
"rxjs": "6.2.2",
"sass-loader": "7.2.0",
"shelljs": "^0.7.8",
"simple-progress-webpack-plugin-with-prefix": "^1.1.1",
"sourcemapped-stacktrace": "^1.1.11",
"string-replace-loader": "2.3.0",
"style-loader": "0.23.1",
"sweetalert2": "6.6.3",
"swiper": "^3.4.2",
"to-string-loader": "^1.1.5",
"ts-loader": "^8.0.12",
"tslib": "1.10.0",
"tslint": "5.20.1",
"tslint-loader": "^3.6.0",
"typescript": "2.9.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "0.5.7",
"web-animations-js": "2.2.2",
"webpack": "4.19.0",
"webpack-bundle-analyzer": "2.8.2",
"webpack-dev-server": "3.8.0",
"webpack-merge": "^4.1.0",
"zone.js": "0.8.29"
},
"devDependencies": {
"#angular/language-service": "^6.1.10",
"webpack-cli": "^3.3.12"
}

Upgrading Angular v8 to Angular v9 get "ngx-mat-select-search" has an incompatible peer dependency to "#angular/material"

I m trying to upgrade from angular 8 to Angular 9 using Documentation
When I run ng update #angular/material I get this error
Fetching dependency metadata from registry...
Package "ngx-mat-select-search" has an incompatible peer dependency to "#angular/material" (requires "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", would install "9.1.3").
× Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
My package.json current ngx-mat-select-search versionn is 1.8.0
Can someone please advise what to do without using --force whith ng update ?
"dependencies": {
"#angular/animations": "^9.0.7",
"#angular/cdk": "^8.2.3",
"#angular/common": "^9.0.7",
"#angular/compiler": "^9.0.7",
"#angular/core": "^9.0.7",
"#angular/forms": "^9.0.7",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "^9.0.7",
"#angular/platform-browser-dynamic": "^9.0.7",
"#angular/router": "^9.0.7",
"#ckeditor/ckeditor5-angular": "^1.1.0",
"#ckeditor/ckeditor5-build-classic": "^12.3.1",
"#material/list": "^3.1.0",
"#types/node": "^12.11.1",
"#types/uuid": "^3.4.5",
"angular-svg-icon": "^7.2.0",
"app": ">=0.1.0",
"core-js": "^2.6.5",
"escape-string-regexp": "^1.0.5",
"flag-icon-css": "^3.4.0",
"hammerjs": "^2.0.8",
"moment": "^2.24.0",
"ng2-file-upload": "^1.3.0",
"ngx-infinite-scroll": "^7.2.0",
"ngx-mat-select-search": "^1.8.0",
"npm": "^6.11.3",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.900.7",
"#angular/cli": "^9.0.7",
"#angular/compiler-cli": "^9.0.7",
"#angular/language-service": "^9.0.7",
"#types/escape-string-regexp": "^1.0.0",
"#types/jasmine": "^3.3.12",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^6.0.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "^3.7.5"
}