Visual Studio 2017 and Apache Cordova mobile apps

Below are some of the issues you may experience when trying to develop Apache Cordova mobile apps with HTML, CSS & JS for Android, iOS and Windows using Microsoft Visual Studio 2017.

Microsoft Visual Studio 2017 logo

Stuck with the Cordova 6.3.1 toolset

The Cordova Toolset from Visual Studio has been stuck in Cordova CLI 6.3.1 since VS2017 was released, and no further updates are provided. This means that you are stuck with the increasingly obsolete Cordova 6.3.1 CLI, and older versions of cordova-android and cordova-ios tools:

visual studio cordova toolset

VS2017 Cordova 6.3.1 toolset.

You can, however, use the globally installed CLI version like Cordova 7.1.0:

cordova 7.1.0 in visual studio 2017

VS2017 Cordova 7.1.0 toolset.

The problem with this approach is that you’ll start getting more and more Visual Studio related errors with the Android platform as you increase the cordova-android version. For example:

  • When using Cordova 6.5.0 and cordova-android 6.3.0, everything will work perfectly. But this version is too old for certain plugins, like the phonegap-plugin-push.
  • When using Cordova 7.1.0 and cordova-android 6.3.0, you can build and deploy to device and emulators, however VS2017 wrongly reports that Deploy failed on the status bar. Nothing serious though, deploy to device, emulators and debug actually work fine.
  • When using cordova-android 6.4.0 or newer, your apps won’t be deployed to device nor emulator. This is because in cordova-android 6.4.0 the APK output path has been changed, causing Visual Studio to no longer find the APK and assume the build has failed. However, you can try the solution to Error DEP10402  to change the APK output path and avoid this error.
  • Whenever you change the CLI version using the shown select box from the config.xml designer, the setting may be forgotten next time you load the project, because config.xml is not properly updated. Read the next issue for more information on dealing with this error.
  • To compile for Android with Cordova 7.1.0, you may need to switch to the Android SDK API 26 by changing the ANDROID_HOME  setting from Visual Studio. This introduces the problem that your Android emulators are no longer detected and you cannot deploy to emulator (see detailed issue below this page).

Note that compiling for Windows 10 / Windows Mobile 10 will still work with latest Cordova versions, such as Cordova 9.0.0/10.0.0 and the [email protected] platform.

The selected Cordova toolset is not saved

By default, Visual Studio 2017 will create new Apache Cordova projects with its own Cordova 6.3.1 toolset. If you change it to use the Globally Installed Cordova version, this setting is forgotten next time you open the project and you are invited to convert the project:

Your Cordova project needs to be updated to work with Visual Studio 15.

Your Cordova project needs to be updated to work with Visual Studio 15.

This is because whenever you change the toolset, the config.xml is not properly updated. In order to change the Cordova version in your project, manually edit config.xml in View Code mode to locate this:

<vs:toolsetVersion>6.3.1</vs:toolsetVersion>

And replace it with your globally installed version number (9.0.0 in this case).

<vs:toolsetVersion>9.0.0</vs:toolsetVersion>

Warning 1: Regardless of the version number inserted here, your globally installed Cordova version will be actually used for all build operations, as long as it’s greater than 6.3.1.

Warning 2: If there’s no vs:toolsetVersion tag present in your config.xml, you’ll need to add the vs namespace attribute to the widget element in config.xml, as follows:

xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps"

Save config.xml and reload the project, your globally installed version will be used from now on, and the update warning message will be gone.

More details on this issue in this answer on Stackoverflow.

Build fails because newer Android SDK is required

When you managed to change the Cordova CLI and cordova-android version, you may encounter an error related to the Android SDK (API 25). Cordova 7.1.0 requires the Android SDK 26 to compile, so you must set the ANDROID_HOME  setting from Visual Studio to your externally installed Android SDK. You can get and manage your installed Android SDK using the classic Android SDK Manager:

android sdk manager

Android SDK Manager for Windows.

This SDK manager has been buried in an attempt to get more developers migrating to Android Studio, which features a built-in SDK manager, but you can still get it here. The problem with Android Studio is that its IDE lacks any support whatsoever for Apache Cordova apps, unlike Visual Studio which provides all the tools required to create, debug, deploy and distribute them.

Unable to deploy to emulator after changing ANDROID_HOME

Whenever you change your ANDROID_HOME  path in the Tools for Apache Cordova settings (to compile with a newer Android API) you may notice that Deploy to Emulator option is gone, and replaced with Install Google Android emulators instead.

Visual Studio ANDROID_HOME path

Changing the Visual Studio 2017 Android SDK path here removes the Deploy to Emulator option.

Unfortunately, setting your custom ANDROID_HOME  to use a newer API will destroy the Deploy to Google Android Emulator option and replace it will Install Google Android Emulators. It seems VS2017 can only deploy to emulatos when using the Android SDK API 25 provided by the Tools for Apache Cordova from the VS2017 installer.

How to use my own ANDROID_HOME and deploy to emulator then?

If you persist in changing the ANDROID_HOME  setting, you can still manually deploy to emulator using the cordova emulate command:

cordova run --emulator

However, you won’t be able to use the Visual Studio built-in debugging tools. You can still use Chrome’s Remote Debugging with the device inspector, but this won’t debug non-Javascript plugins. This issue does not exist on Visual Studio 2015, which allows using your own ANDROID_HOME setting while deploying to devices and emulators correctly.

How about manually updating the built-in API 25 folder with a newer API?

That would be great. However, because the folder structure of the Android SDK API 25 provided by VS2017 installer is very different from the original SDK structure created by the Android SDK Manager, you cannot simply replace the contents of the API 25 folder with those from API 26 to workaround this issue. Trying this will probably result in a non-functional SDK.

No more Windows Phone 8.1 compatibility

In Visual Studio 2017 you can no longer compile Windows Phone 8 apps. Only UWP (Universal Windows Platform) apps can be compiled and deployed, as stated in the Platform Targeting article. This means that UWP 10, provided with VS2017, can only compile apps for Windows 10 and Windows 10 Mobile, but not Windows Phone 8.

With Visual Studio 2015  and the Windows Phone 8.1 SDK you can compile UWP that are compatible with both Windows Phone 8.1 and Windows 10 Mobile, by selecting the Windows Target Version: Windows 8.1 in the config.xml designer.

Using Android Studio for Apache Cordova apps

Unlike Visual Studio, Google’s Android Studio does not feature any bundled Cordova-related functionality whatsoever. You can, however, use this method to import a Cordova project from Android Studio:

  1. Install Cordova from the command line.
  2. Manually create your app from the CLI.
  3. Add the android platform to your app from the CLI (4.0.0 or newer).
  4. From Android Studio select File > New > Import Project and select the build.gradle file from your android platform in the project.

More details about this process in the IBM Knowledge Center.

You’ll need to perform all build, deploy and debug operations manually from the command line, because Android Studio does not include the built-in Cordova functionality that other IDEs such as NetBeans or Visual Studio provide.

 

Disclaimer

The content in this post is for general information purposes only. The information is provided by the author and/or external sources and while we endeavour to keep the information up to date and correct, we make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services, or related graphics contained on the post for any purpose. Some of the content and images used in this post may be copyrighted by their respective owners. The use of such materials is intended to be for educational and informational purposes only, and is not intended to infringe on the copyrights of any individuals or entities. If you believe that any content or images used here violate your copyright, please contact us and we will take appropriate measures to remove or attribute the material in question.