npm dependency issues and not sure how to resolve - npm

Question

I really always have problems understanding the conflict issues in npm when installing/updating packages, currently i'm getting this error:
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: frontend#1.0.0
npm ERR! Found: #angular/animations#15.1.4
npm ERR! node_modules/#angular/animations
npm ERR! #angular/animations#"^15.1.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #angular/animations#"12.2.17" from #angular/platform-server#12.2.17
npm ERR! node_modules/#angular/platform-server
npm ERR! #angular/platform-server#"^12" 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.
What actually is it that it's telling me the problem is? It doesn't just say "this package is not compatible with this package, update to this" it just gives a cryptic message. It always seems when i try to update a package, another has an issue with it.
Here are the dependencies in package.json
"dependencies": {
"#angular/animations": "^15.1.4",
"#angular/cdk": "^15.1.4",
"#angular/common": "^15.1.4",
"#angular/compiler": "^15.1.4",
"#angular/core": "^15.1.4",
"#angular/flex-layout": "^8.0.0-beta.27",
"#angular/forms": "^15.1.4",
"#angular/http": "^7.2.16",
"#angular/material": "^15.1.4",
"#angular/platform-browser": "^15.1.4",
"#angular/platform-browser-dynamic": "^15.1.4",
"#angular/platform-server": "^12",
"#angular/router": "^15.1.4",
"#ng-bootstrap/ng-bootstrap": "^14.0.1",
"#scullyio/init": "^2.1.41",
"#scullyio/ng-lib": "^2.1.0",
"#scullyio/platform-server": "^2.1.0",
"#scullyio/scully": "^2.1.0",
"angular-calendar": "^0.31.0",
"angular-flatpickr": "^3.6.6",
"angular-linky": "^1.2.2",
"angular-password-strength-meter": "^5.0.1",
"angularx-flatpickr": "^7.0.0",
"date-fns": "^2.29.3",
"emoji-js": "^3.7.0",
"flatpickr": "^4.6.13",
"hammerjs": "^2.0.8",
"jquery": "^3.6.3",
"ng-recaptcha": "^11.0.0",
"ng-socket-io": "^0.2.4",
"ng2-file-upload": "^3.0.0",
"ng4-loader-bar": "^1.0.3",
"ngb-modal": "^2.0.3",
"ngx-emoji-picker": "0.1.6",
"ngx-file-drop": "^14.0.2",
"ngx-image-cropper": "^6.3.2",
"ngx-infinite-scroll": "^15.0.0",
"ngx-lightbox": "^3.0.0",
"ngx-toastr": "^16.0.2",
"ngx-ui-loader": "^13.0.0",
"rxjs": "^7.8.0",
"rxjs-compat": "^6.6.7",
"socket.io-client": "^4.6.0",
"tslib": "^2.5.0",
"ws": "^8.12.1",
"zone.js": "~0.12.0",
"zxcvbn3": "^0.1.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "^15.1.5",
"#angular/cli": "^15.1.5",
"#angular/compiler-cli": "^15.1.4",
"#angular/language-service": "^15.1.4",
"#types/jasmine": "~4.3.1",
"#types/jasminewd2": "~2.0.10",
"#types/node": "~18.13.0",
"codelyzer": "^6.0.2",
"jasmine-core": "~4.5.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.1",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"protractor": "~5.4.0",
"ts-node": "~10.9.1",
"tslint": "~5.20.1",
"typescript": "~4.9.5"
}