Ionic Installation Guide

Install Node.js

npm config set prefix "C:\Software\nodejs\node_global"
npm config set cache "C:\Software\nodejs\node_cache"

Install the Ionic CLI

npm install -g cnpm –registry=https://registry.npm.taobao.org
cnpm install -g @ionic/cli

Start an App

ionic start/ionic start myApp tabs
cd myApp
ionic serve

Using Capacitor with Ionic

inside of your project folder
npm install --save @capacitor/core @capacitor/cli
npx cap init
ionic build —>This creates the www folder that Capacitor has been automatically configured to use as the webDir in capacitor.config.json.
npx cap add android
npx cap open android

Using Cordova with Ionic

ionic start/ionic start myApp tabs
Integrate your new app with Capacitor to target native iOS and Android? (y/N) N
ionic cordova prepare android
ionic cordova run android -l

If an exception occurred while compiling the gradle like:

Exception in thread "main" java.lang.NullPointerException
            at org.gradle.wrapper.PathAssembler.getDistName(PathAssembler.java:84)
            at org.gradle.wrapper.PathAssembler.getDistribution(PathAssembler.java:40)
            at org.gradle.wrapper.Install.createDist(Install.java:44)
            at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:107)
            at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)

Navigate to PROJECT_ROOT_FOLDER/platforms/android/cordova/lib/builders folder and edit ProjectBuilder.js file
Change the line from: var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'http\\://services.gradle.org/distributions/gradle-4.10.3-all.zip';
to
'var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'http\\://services.gradle.org/distributions/gradle-5.6.4-all.zip'; and save the file

gradle-5.6.4-all.zip The latest version of gradle.

Syncing your app with Capacitor

Every time you perform a build (e.g. ionic build) that changes your web directory (default: www), you’ll need to copy those changes down to your native projects:
npx cap copy

Environment Variable

  • ANDROID_SDK_ROOT C:\Software\Android\AndroidSdk

  • GRADLE_HOME C:\Users\your user name.gradle\wrapper\dists\gradle-5.6.4-all\ankdp27end7byghfw1q2sw75f\gradle-5.6.4

- CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL C:\Users\your user name.gradle\wrapper\dists\gradle-5.6.4-all\ankdp27end7byghfw1q2sw75f\gradle-5.6.4-all.zip

  • JAVA_HOME C:\Software\Java\jdk1.8.0_221

  • NODE_HOME C:\Software\nodejs

  • Path %JAVA_HOME%\bin;
    %JAVA_HOME%\jre\bin;
    %ANDROID_SDK_ROOT%\platform-tools;
    %ANDROID_SDK_ROOT%\tools;%ANDROID_SDK_ROOT%\tools\bin;
    %ANDROID_SDK_ROOT%\emulator;
    %GRADLE_HOME%\bin;
    %NODE_HOME%;
    %NODE_HOME%\node_global;

Versions

node -v v12.16.2  
npm -v  6.14.4   
ionic -v 6.5.0
cordova -v 9.0.0 (cordova-lib@9.0.1)
gradle -v Gradle 5.6.4