Earlier version of Angular: 15.2.0 and Node: was 14.21.3
Now we are upgrading the Angular from 15.2.0 to 16.2.9 and we are facing many peer dependencies.
In our code we are using Angular Material, Bootstrap, RXjs, NGX-Slick-Carousel, FontAwesome etc.
Please find the below package.json for 16.2.9 your reference.
{
"name": "csclient-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --configuration production --output-hashing none",
"build:dev": "node --max-old-space-size=8192 node_modules/@angular/cli/bin/ng build --c=dev --aot",
"build:test": "node --max-old-space-size=8192 node_modules/@angular/cli/bin/ng build --c=test --aot",
"build:stage": "node --max-old-space-size=8192 node_modules/@angular/cli/bin/ng build --c=stage --aot",
"build:prod": "node --max-old-space-size=8192 node_modules/@angular/cli/bin/ng build --c=production --aot",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.2.9",
"@angular/cdk": "^16.2.9",
"@angular/common": "^16.2.9",
"@angular/compiler": "^16.2.9",
"@angular/core": "^16.2.9",
"@angular/forms": "^16.2.9",
"@angular/material": "^16.2.9",
"@angular/platform-browser": "^16.2.9",
"@angular/platform-browser-dynamic": "^16.2.9",
"@angular/router": "^16.2.9",
"@auth0/angular-jwt": "5.0.2",
"@azure/msal-angular": "^2.3.0",
"@azure/msal-browser": "^2.25.0",
"@fortawesome/angular-fontawesome": "^0.13.0",
"@fortawesome/fontawesome-free": "^5.15.4",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"bootstrap": "^5.1.1",
"crypto-js": "^4.1.1",
"html-to-pdfmake": "^2.3.6",
"jquery": "^3.6.0",
"jspdf": "^2.4.0",
"ng-starrating": "^1.0.20",
"ngx-bootstrap": "^11.0.2",
"ngx-device-detector": "^1.3.20",
"ngx-ellipsis": "^3.1.4",
"ngx-responsive": "^9.0.3",
"ngx-slick-carousel": "^15.0.0",
"ngx-toastr": "^18.0.0",
"pdfmake": "^0.2.2",
"popper.js": "^1.14.3",
"rxjs": "~6.6.0",
"slick-carousel": "^1.8.1",
"tslib": "2.0.3",
"uuid": "^8.3.2",
"ajv": "8.12.0",
"zone.js": "~0.13.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.2.9",
"@angular-eslint/builder": "^12.0.0",
"@angular-eslint/eslint-plugin": "^12.0.0",
"@angular-eslint/eslint-plugin-template": "^12.0.0",
"@angular-eslint/schematics": "16.3.0",
"@angular-eslint/template-parser": "^12.0.0",
"@angular/cli": "^16.2.9",
"@angular/compiler-cli": "^16.2.9",
"@types/crypto-js": "^4.0.2",
"@types/html-to-pdfmake": "^2.1.0",
"@types/jasmine": "~3.6.0",
"@types/jquery": "^3.3.32",
"@types/lodash": "^4.14.136",
"@types/lodash-es": "^4.17.4",
"@types/node": "^12.20.25",
"@types/pdfmake": "^0.1.19",
"@types/uuid": "^8.3.4",
"@typescript-eslint/eslint-plugin": "^5.59.2",
"@typescript-eslint/parser": "^5.59.2",
"eslint": "^8.39.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "4.9.5",
"uuid": "^8.3.2"
}
}
We have executed below command for Angular Upgrade:
ng update @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] [email protected] @angular/[email protected] @angular-eslint/[email protected] [email protected] [email protected] @fortawesome/[email protected]
For Angular 16.2.0 we are using Node version 18.13.0.
Now we are facing below issues after upgradation:
For ngx-respnsive we checked and got to know that latest version of ngx-responsive is 9.0.3 and that is not compatible with NG version 16. Same thing for ng-starrating.
Any leads/suggestions would be appriciated.