Using Cordova 8.1.2 with Visual Studio

Here you’ll find some references to setup your environment for Cordova CLI 8.1.2 apps development with (optionally) Microsoft Visual Studio 2015 / 2017. This guide is focused on the Android platform, but it’s mostly valid for iOS apps as well.

Visual Studio Cordova Logo

Install NodeJS 6.x

To ensure build and plugins compatibility, proceed to install NodeJS 6.x first. Please note that installing a version newer (or older) than 6.x could result in several build errors.

Open a command prompt and run npm cache clean when done.

Install Gradle 4.10.x

To ensure plugins compatibility, proceed to install Gradle 4.10.x with the linked instructions. You may or may not install a newer version at your own risk.

Upgrade your global Cordova CLI version

To upgrade to Cordova CLI 8.1.2, open a command prompt and type:

Wait for this process to end and continue with the steps below to proceed upgrading your app(s) individually.

Quick version check

Before continuing, make sure you have versions similar to the ones shown below:

Cordova, Node, Gradle versions for Cordova 8.1.2

Cordova, Node, Gradle versions for Cordova 8.1.2

Upgrade the cordova-android version from your app

Whenever you upgrade Cordova CLI, a new cordova-android version will surely be required. Proceed like this to upgrade each of your apps created with an older CLI version:

  1. Create a ZIP backup of your app to avoid loosing important files when removing the platform, or just to keep a backup of your app with the old Cordova.
  2. Open a command prompt in your project’s root
  3. Run cordova platform rm android
    • Optional and recommended: Remove Firebase-related plugins such as phonegap-plugin-push and cordova-support-google-services.
    • Visual Studio developers please use the command prompt to manage plugins.
    • Ensure the corresponding folder is deleted from the plugins folder
    • Also make sure no references to the plugin are left in either:
      • plugins/android.json
      • plugins/fetch.json
  4. Run cordova platform add android to add a compatible cordova-android platform

    • If you get critical errors when adding the platform, return to step 3 and remove problematic plugins.
    • Side note: Dependant plugins such as cordova-support-google-services will be auto fetched when adding the platform.
  5. Run cordova platforms to check which version was installed (probably cordova-android@7.1.4)
  6. Run cordova clean to resolve any plugin-related dependencies
  7. If your clean result is BUILD FAILED:
    1. Inspect the shown error messages to detect problematic plugin(s)
    2. Restart from step 3 and remove / update problematic plugin(s)
    3. DO NOT CONTINUE BELOW until you get a successfull clean output.
  8. Now that your clean result is BUILD SUCCESSFUL:
    • Add your google-services.json file into platforms/android/app if required.
    • Visual Studio developers: Jump to the Prevent error DEP10402 instructions below and continue with next step.
  9. Run cordova build android and check the output:
    • If the build result is BUILD FAILED:
      1. Check if your error is something like a missing google-services.json file and address this by copying the file to the proper folder.
      2. Inspect the console output to isolate problematic plugins, and restart from step 3 to remove or update them with newer versions until the error is gone.
      3. SKIPPING TO NEXT STEP IS USELESS until you get a successful build.
  10. Now that your build result is BUILD SUCCESSFUL:
    • Add the uninstalled plugins required, if any. Do not accept anything other than successful build outputs.
    • This is a great time to upgrade your plugins individually to get newest versions.
    • Visual Studio developers:
      1. Go to Tools > Options > Tools for Apache Cordova > Cordova Tools > Clear Cordova Cache. This task could take a few seconds.
      2. You can now open the solution file and compile + deploy normally.

Notice for Visual Studio fellow developers: Starting with Cordova CLI 7.1.0, whenever you deploy to emulator or device the status bar might incorrectly show Deploy failed. You should disregard this label and instead look for the INSTALL SUCCESS and LAUNCH SUCCESS messages in the console output.

Visual Studio status bar

Visual Studio 2015 status bar shows a wrong Deploy failed message with CLI 7.1.0+.

Fixing cordova platform add android-related errors

Make sure you have installed the Node 6.x and Gradle 4.10.x versions as shown earlier. Newer/older versions could introduce incompatibilities. Also, make sure to carefully follow the steps previously provided, and you’ll manage to start building Cordova apps in no time.

Prevent error: edge is not precompiled for Node (…)

Install edge-js from the command line in the project’s folder:

Prevent error DEP10402: Could not locate a deployable apk

This error was introduced to Visual Studio by the folder structure change from cordova-android@6.4.0. To fix this, create a settings file platforms/android/build-extras.gradle with these contents or download it here.

The generated APK files now will be android-debug.apk or android-release.apk, and will be present in the platforms/android/build/outputs/apk folder where Visual Studio expects to find it.

Rename the output APK to add package name + version

To change the output APK file name from the generic android-debug.apk to something like my.package.name-debug-1.0.0.apk, add this to the platforms/android/build-extras.gradle file, or download it here.

WARNING: If you rename the APK as shown here, Visual Studio won’t locate the file anymore and Deploy to Device / Emulator will stop working.

Android API levels supported by cordova-android

The supported Android API Levels and Android Versions for the past few cordova-android releases can be found in the following table. Taken from Cordova’s Requirements and Support page.

Cordova Android API levels supported

Cordova Android API levels supported

More tips coming soon

This page is still being updated so kindly bookmark it. Feel free to leave your comments below if you found this guide helpful (or not), and myself or someone will eventually post a reply.

All product names, logos, and brands in this website are property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement.