How to upgrade Angular 12 project to Angular 18/19 . Best practices and handling incompatible...

I’m working on an Angular project currently built with Angular 12. I want to upgrade it to Angular 18 or 19 (whichever is stable and recommended).

I have several questions regarding the best upgrade path:

1. 
   Is it advisable to upgrade directly from Angular 12 to 18/19, or should I upgrade version by version (e.g., 12 → 13 → ... → 18)?
   
   
2. 
   How can I check whether my existing dependencies (including Angular Material and CDK v12) are compatible with the newer Angular versions?
   
   
3. 
   If some of my dependencies are not compatible, what is the best approach? I need some of them, so removing isn't an option.
   
   
4. 
   Are there any tools or commands that can help automate or ease the upgrade process?
   

{
"dependencies": {
"@agm/core": "^3.0.0-beta.0",
"@angular-material-components/datetime-picker": "^5.1.1",
"@angular/animations": "~12.1.5",
"@angular/cdk": "^11.2.0",
"@angular/common": "~12.1.5",
"@microsoft/applicationinsights-web": "^2.5.8",
"@angular/compiler": "~12.1.5",
"@angular/core": "~12.1.5",
"@angular/elements": "^12.2.0",
"@angular/forms": "~12.1.5",
"@angular/material": "^11.2.0",
"@angular/platform-browser": "~12.1.5",
"@angular/platform-browser-dynamic": "~12.1.5",
"@angular/router": "~12.1.5",
"@fortawesome/fontawesome-free": "^5.15.4",
"@fullcalendar/angular": "^6.1.10",
"@fullcalendar/core": "^6.1.10",
"@fullcalendar/daygrid": "^6.1.10",
"@fullcalendar/interaction": "^6.1.10",
"@fullcalendar/list": "^6.1.10",
"@fullcalendar/resource": "^6.1.15",
"@fullcalendar/resource-timeline": "^6.1.15",
"@fullcalendar/timegrid": "^6.1.10",
"@kolkov/angular-editor": "1.2.0",
"@microsoft/clarity": "^1.0.0",
"@ng-bootstrap/ng-bootstrap": "^10.0.0",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@openreplay/tracker": "^15.0.3",
"@types/crypto-js": "^4.2.2",
"@types/signature_pad": "^2.3.6",
"@webcomponents/custom-elements": "^1.5.0",
"agm-direction": "^0.8.10",
"angular-formio": "^4.11.5",
"angular-formio-pdf": "^0.1.5",
"angular-resizable-element": "^4.0.0",
"axios": "^0.21.1",
"bootstrap": "^5.1.0",
"compressorjs": "^1.2.1",
"crypto-js": "^4.2.0",
"fast-submission2any": "^0.1.0",
"file-saver": "^2.0.5",
"formio-export": "^0.3.0",
"global": "^4.4.0",
"highcharts": "^9.3.2",
"highcharts-angular": "^2.10.0",
"html2canvas": "^1.4.1",
"html2pdf.js": "^0.10.1",
"json-as-xlsx": "^2.5.6",
"json2csv": "^5.0.0",
"jszip": "^3.10.1",
"lodash": "^4.17.21",
"moment": "^2.29.3",
"moment-timezone": "^0.5.43",
"ng-intercom": "^8.0.2",
"ng-multiselect-dropdown": "^0.3.4",
"ng-recaptcha": "^8.0.0",
"ng2-dragula": "^2.1.1",
"ng2-pdf-viewer": "^7.0.1",
"ngx-audio-player": "^12.0.2",
"ngx-bootstrap-multiselect": "^2.1.1",
"ngx-cookie-service": "^11.0.2",
"ngx-dropzone": "3.0.0",
"ngx-image-cropper": "^5.0.0",
"ngx-virtual-scroller": "^4.0.3",
"pdfmake": "^0.2.2",
"rrule": "^2.8.1",
"rxjs": "~6.6.0",
"signature_pad": "^3.0.0-beta.4",
"tslib": "^2.6.2",
"workbox-cli": "^6.1.5",
"xlsx": "^0.18.5",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.1.4",
"@angular/cli": "~12.1.4",
"@angular/compiler-cli": "~12.1.5",
"@types/jasmine": "~3.6.0",
"codelyzer": "^6.0.0",
"env-cmd": "^10.1.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.2",
"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",
"tslint": "~6.1.0",
"typescript": "~4.3.5"
}
}

What precautions or important things should I keep in mind while performing this upgrade?

Continue reading...