IONIC Cordova to Capacitor migration

Add Capacitor

Begin by opening your project in the terminal,

ionic integrations enable capacitor

# Delete capacitor.config.ts and try again
npx cap init

Build your Web App

npm run build

Add Platforms

#  You must install it in your project first, e.g. w/ npm install @capacitor/android
npm install @capacitor/android

npx cap add android

Splash Screens and Icons

The source image for icons should ideally be at least 1024×1024px and located at resources/icon.png. The source image for splash screens should ideally be at least 1920x1920px and located at resources/splash.png. If you used ionic start, there should already be default Ionic resources in the resources/ directory, which you can overwrite.

npm install -g cordova-res
cordova-res android --skip-config --copy

Migrate Plugins

npx cap sync

Run app

ionic capacitor run

https://dothanhlong.org/run-capacitor-android-ok/

Delete, Install unused plugins

There are some default plugins that are already in the capacitor, some will cause errors (in my case), so we need to remove it.

npm uninstall --save @ionic-native/<npm-name-of-plugin>

npm uninstall com-sarriaroman-photoviewer
npm uninstall @awesome-cordova-plugins/photo-viewer
npm uninstall cordova-plugin-file
npm uninstall cordova-plugin-whitelist

Run ok on Android API 33

Refernces

1. https://capacitorjs.com/docs/cordova/migrating-from-cordova-to-capacitor
2. https://dothanhlong.org/run-capacitor-android-ok/