Fix the upstream dependency conflict (Nodejs 16.16.0 / npm 8.11.0 / ionic 7.2.0)

I am new to ionic. I got issues when build at Mac OS (14.4.1) by visual studio code. I am wondering do I need to update package.json files and resolve those dependance one-by-one?

When I run
sudo ionic capacitor add ios --force

Returnnpm
ERR! While resolving: ion-media-cache@0.1.5
npm ERR! Found: @angular/common@8.2.14
npm ERR! node_modules/@angular/common
npm ERR! peer @angular/common@“^6.0.0 || ^7.0.0 || ^8.0.0” from @agm/core@1.1.0
npm ERR! node_modules/@agm/core
npm ERR! peer @agm/core@“^1.0.0-beta.2” from agm-direction@0.7.9
npm ERR! node_modules/agm-direction
npm ERR! agm-direction@“^0.7.9” from the root project
npm ERR! @agm/core@“^1.1.0” from the root project
npm ERR! peer @angular/common@“8.2.14” from @angular/forms@8.2.14
npm ERR! node_modules/@angular/forms
npm ERR! peer @angular/forms@“>=8.2.7” from @ionic/angular@5.0.7
npm ERR! node_modules/@ionic/angular
npm ERR! @ionic/angular@“^5.0.0” from the root project
npm ERR! @angular/forms@“~8.2.14” from the root project
npm ERR! 6 more (@angular/platform-browser, …)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@“^11.2.1” from ion-media-cache@0.1.5
npm ERR! node_modules/ion-media-cache
npm ERR! ion-media-cache@“^0.1.5” from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/common@11.2.14
npm ERR! node_modules/@angular/common
npm ERR! peer @angular/common@“^11.2.1” from ion-media-cache@0.1.5
npm ERR! node_modules/ion-media-cache
npm ERR! ion-media-cache@“^0.1.5” from the root project

Looks like the conflict comes from @agm/core, which has not been updated in 4 years, so most likely you’ll have to stop using it.

You can also install with --force param and pray for things to keep working.