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. For these and other reasons I prefer to keep using Visual Studio 2015, which has none of the mentioned issues.

No more Windows Phone 8.1 compatibility

One of the things I dislike the most about Visual Studio 2017 is that you can no longer compile Windows Phone 8 apps. Only not-quite-universal UWP (Universal Windows Platform) apps can be compiled and deployed, as stated in the Platform Targeting article:

Projects for Windows Store 8.1 and 8.0, and Windows Phone 8.1 and 8.0 are not supported in this release. To maintain these apps, continue to use Visual Studio 2015.

This means that UWP 10, provided with VS2017, can only compile apps for Windows 10 and Windows 10 Mobile, but not Windows Phone 8. There are still millions of Windows Phone 8.1 devices in use out there, so keeping good compatibility between them and your app will ensure you get more users.

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.

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 as you increase the Cordova CLI and cordova-android versions. 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 unfortunately changed, causing Visual Studio to no longer find the APK and assume the build has failed. My report on this issue has been dismissed as an IDE problem, in other words, Visual Studio should be updated to fix this. You could wait forever until a new toolset is released, so I wouldn’t count on that.
  • 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).

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.

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:

<engine name="android" spec="5.2.1" />

And replace it with your globally installed version (7.1.0 in this case). A newer cordova-android version is set as well (6.3.0 is the last version that works on Visual Studio, afterwards the Apache Cordova team kindly broke it by changing the APK output path).

<engine name="android" spec="6.3.0" />

Save config.xml and reload the project, your globally installed version will be pre-selected and no conversion will be asked.

You can find more details on this issue in this answer I’ve posted 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 easily 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. This can be very frustrating.

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 (increasingly obsolete) Android SDK API 25 provided by the Tools for Apache Cordova from the VS2017 installer itself.

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.

Related Issues with Cordova, Visual Studio or Android Emulators

Having another issue? Add your Comment

I haven’t tried VS2017 long enough to locate all its Cordova related issues. If you encounter any other problem feel free to submit it using the Comments form from Disqus on this page. I will try to help you or investigate the issue if I have the time to do so.

All product names, logos, and brands 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.