IONIC Cordova to Capacitor migration

Table of Contents

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

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




Leave a Reply

Your email address will not be published. Required fields are marked *