Visual Studio 2017 and Apache Cordova mobile apps

Here are some of the issues you may encounter when trying to develop Apache Cordova mobile apps with HTML, CSS & JS for Android, iOS, Windows Phone using Microsoft Visual Studio 2017. For this and other reasons I keep using Visual Studio 2015, which has none of this problems.

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 and debug actually works fine.
  • When using cordova-android 6.4.0 or newer, your apps won’t be deployed. This is because since cordova-android 6.4.0 the APK output path has 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 will be forgotten 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 on 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.

The Deploy to Google Android Emulator option will show up only if you are using the Android SDK API 25 provided by the Tools for Apache Cordova from the VS2017 installer. You won’t be able to deploy to emulator when you change your ANDROID_HOME from Visual Studio’s settings, not from the IDE at least.

You can still 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.

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.