migration of ionic cordova to capacitor in ionic angular

Issue

I have one application, and due to a recent upgrade to the Android SDK, I cannot publish fresh builds to Google Console. I'm using ionic, angular, and Cordova.

**ionic info**

Ionic:

   Ionic CLI                     : 6.18.1 (C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.9.4
   @angular-devkit/build-angular : 12.0.5
   @angular-devkit/schematics    : 12.0.5
   @angular/cli                  : 12.0.5
   @ionic/angular-toolkit        : 4.0.0

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : android 9.1.0, ios 6.2.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 23 other plugins)

Utility:

   cordova-res : 0.15.3
   native-run  : 1.3.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\user\AppData\Local\Android\Sdk)
   NodeJS            : v16.15.1 (C:\Program Files\nodejs\node.exe)
   npm               : 9.6.5
   OS                : Windows 10

Adding package.json file

"dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/common": "~12.0.1",
    "@angular/core": "~12.0.1",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "~12.0.1",
    "@angular/platform-browser": "~12.0.1",
    "@angular/platform-browser-dynamic": "~12.0.1",
    "@angular/router": "~12.0.1",
    "@awesome-cordova-plugins/core": "^6.3.0",
    "@awesome-cordova-plugins/image-picker": "^6.3.0",
    "@awesome-cordova-plugins/in-app-browser": "^6.3.0",
    "@ionic-native/android-permissions": "^5.36.0",
    "@ionic-native/app-launcher": "^5.35.0",
    "@ionic-native/app-version": "^5.36.0",
    "@ionic-native/clipboard": "^5.31.1",
    "@ionic-native/core": "^5.31.1",
    "@ionic-native/diagnostic": "^5.34.0",
    "@ionic-native/document-viewer": "^5.35.0",
    "@ionic-native/facebook": "^5.34.0",
    "@ionic-native/fcm": "^5.34.0",
    "@ionic-native/file": "^5.31.1",
    "@ionic-native/file-path": "^5.36.0",
    "@ionic-native/file-transfer": "^5.31.1",
    "@ionic-native/geolocation": "^5.31.1",
    "@ionic-native/google-plus": "^5.34.0",
    "@ionic-native/in-app-browser": "^5.34.0",
    "@ionic-native/market": "^5.35.0",
    "@ionic-native/network": "^5.31.1",
    "@ionic-native/network-interface": "^5.31.1",
    "@ionic/angular": "^5.5.2",
    "bootstrap": "^4.3.1",
    "bs-stepper": "^1.7.0",
    "classlist.js": "^1.1.20150312",
    "com.razorpay.cordova": "git+https://github.com/razorpay/razorpay-cordova.git",
    "copy-to-clipboard": "^3.3.3",
    "cordova-ios": "6.2.0",
    "cordova-plugin-androidx": "^3.0.0",
    "cordova-universal-links-plugin-fixed": "^1.2.1",
    "firebase": "7.24.0",
    "flickity": "^3.0.0",
    "ng-connection-service": "^1.0.4",
    "ng2-pdf-viewer": "^7.0.1",
    "ngx-image-compress": "^11.0.3",
    "ngx-pinch-zoom": "^2.6.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.5.0",
    "web-animations-js": "^2.3.2",
    "x2js": "^3.2.3",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.1",
    "@angular-eslint/builder": "~12.0.0",
    "@angular-eslint/eslint-plugin": "~12.0.0",
    "@angular-eslint/eslint-plugin-template": "~12.0.0",
    "@angular-eslint/template-parser": "~12.0.0",
    "@angular/cli": "~12.0.1",
    "@angular/compiler": "~12.0.1",
    "@angular/compiler-cli": "~12.0.1",
    "@angular/language-service": "~12.0.1",
    "@ionic/angular-toolkit": "^4.0.0",
    "@ionic/lab": "3.2.10",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "cordova-android": "^10.0.0",
    "cordova-clipboard": "^1.3.0",
    "cordova-plugin-android-permissions": "^1.1.5",
    "cordova-plugin-androidx-adapter": "^1.1.3",
    "cordova-plugin-app-launcher": "^0.4.0",
    "cordova-plugin-app-version": "^0.1.12",
    "cordova-plugin-cocoapod-support": "^1.6.2",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-document-viewer": "^1.0.0",
    "cordova-plugin-facebook-connect": "^2.3.0",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.5.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-filepath": "^1.6.0",
    "cordova-plugin-geolocation": "^4.1.0",
    "cordova-plugin-googleplus": "^8.5.2",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-market": "^1.2.0",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-networkinterface": "^2.0.0",
    "cordova-plugin-photoeditorsdk": "^2.2.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-telerik-imagepicker": "^2.3.6",
    "cordova-plugin-whitelist": "^1.3.5",
    "cordova.plugins.diagnostic": "^6.0.3",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.7.1",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.2.4"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-clipboard": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-networkinterface": {},
      "cordova-plugin-geolocation": {},
      "cordova.plugins.diagnostic": {
        "ANDROIDX_VERSION": "1.+"
      },
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-androidx": {},
      "cordova-plugin-inappbrowser": {},
      "com.razorpay.cordova": {},
      "cordova-plugin-fcm-with-dependecy-updated": {
        "ANDROID_DEFAULT_NOTIFICATION_ICON": "@mipmap/ic_launcher",
        "ANDROID_FCM_VERSION": "21.0.0",
        "ANDROID_FIREBASE_BOM_VERSION": "26.0.0",
        "ANDROID_GOOGLE_SERVICES_VERSION": "4.3.4",
        "ANDROID_GRADLE_TOOLS_VERSION": "4.1.0"
      },

What I've Tried:

1. upgraded ionic version to 6 got peer dependency error

2. upgraded Cordova version to 12 and got peer dependency error

3. added ionic capacitor in existing code getting error

   

Workaround:

I have added a google-package.json file in the app folder still the same error

Should I keep ionic cordova? or migrate it to a capacitor ?

Solution

1. revise your package.json file.
2. write down list of cordova plugins and find Capacitor alternatives.
3. Update Angular and its libs
4. Update Ionic (this is important to do this at THIS step).
5. Take a long time to refactor ALL your code that uses cordova Plugins to Capacitor plugins.

And follow the migration guide if you get stuck: https://capacitorjs.com/docs/cordova/migrating-from-cordova-to-capacitor

Answered By - StackoverBlows