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.
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:
You can, however, use the globally installed CLI version like Cordova 7.1.0:
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.
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:
And replace it with your globally installed version number (9.0.0 in this case).
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:
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.
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:
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.
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.
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
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.
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:
- Install Cordova from the command line.
- Manually create your app from the CLI.
- Add the android platform to your app from the CLI (4.0.0 or newer).
- From Android Studio select the build.gradle file from your android platform in the project. and select
More details about this process in the IBM Knowledge Center.
Warning: 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.
Related Issues with Cordova Android
- Issues running your Android 8 or newer emulators when installed with the Android SDK Manager: Using Android 8 and 9 emulators without Android Studio
- Issues running or deploying your iOS app with the remote agent for macOS from Visual Studio for Windows: Build Cordova iOS app from Visual Studio for Windows
How to debug your Cordova Android app