Capacitor

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web.

We strongly recommend to use Capacitor and the explanation is in this post: https://ionicthemes.com/tutorials/about/native-cross-platform-web-apps-with-ionic-capacitor‚Äč

The PRO version of this template uses Capacitor instead of Cordova, however, in this section, we will show you how to remove Capacitor and add Cordova if you are not yet ready to use it.

Steps to remove Capacitor and add Cordova

  • Delete ios, android and .gradle folders

  • Delete capacitor.config.json

  • Run: ionic cordova platform add ios

  • Run: ionic cordova platform add android

You will have to change the Capacitor plugins for Ionic Native plugins.

Install Ionic Native by running:

npm install @ionic-native/core @ionic-native/status-bar @ionic-native/splash-screen --save

Go to app.component.tsand do the following:

Remove:

import { Plugins } from '@capacitor/core';
const { SplashScreen } = Plugins;

Add:

import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Platform } from '@ionic/angular';

Change the initializeApp() method for the following code:

initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}

Add the following parameters to the constructor:

constructor(...,
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar)

Now go to app.module.ts and add the following:

import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

Then add them as providers of the module:

providers: [
StatusBar,
SplashScreen,
...
],

Now if you run ionic serve everything should work fine.

We use Share and Geolocation plugins from Capacitor. If you want those features to work in your Cordova app, you need to change the implementation using the respective Ionic Native plugins.

Now you can safely remove the Capacitor dependencies from your package.json.

npm uninstall --save @capacitor/android
npm uninstall --save @capacitor/cli
npm uninstall --save @capacitor/core
npm uninstall --save @capacitor/ios