Search code examples
cordovavisual-studio-2017tools-for-apache-cordova

How to use a more up to date Cordova plugin in Visual Studio 2017

I recently added the Camera and File plugins to my Ionic 1.3/ Cordova app, and now the app is intermittently crashing on the Android device I am using.

The crash is not happening when I am actually using the plugins, nonetheless I wanted to see if the problem would go away if I used more up to date plugins.

If I remove the Camera plugin and add it again, I can see this in the output window:

Warning: Unmet project requirements for latest version of cordova-plugin-camera: Warning: cordova-android (5.2.1 in project,

=6.3.0 required) Warning: Fetching highest version of cordova-plugin-camera that this project supports: 2.4.1 (latest is 4.0.2)

Currently in Visual Studio 2017 you can specify a Toolset that uses Cordova 6.3.1 or a Global Cordova version, so I thought I would try using the latest version of Cordova and on a command line entered: npm install -g cordova. I had to restart my computer, but now in my config.xml I can choose "Global Cordova 8.0.0".

Now, in order to use the latest Camera plugin I need to get the cordova-android platform >=6.3.0. But if I use cordova platform add android, it fails because that command needs to be run inside a Cordova-based project.

So I navigate to my existing project folder and run cordova platform add android again. It tries to fetch cordova-android@5.2.1 - so I guess it's now using cordova 6.3.1, because that's the local version. <edit> Wrong! - cordova -v tells me it's 8.0.0, so it must be choosing 5.2.0 for some other reason.</edit>

So what do I need to do now? Do I need to uninstall the local cordova from a command line? Do I delete the existing node_modules, platforms, plugins folders? Do I change the config.xml? (current example entry: - <plugin name="cordova-plugin-camera" spec="~2.4.1" />. If I do all that then decide I need to go back to using Visual Studio's toolset, will I have to keep copies of everything and install manually or can I just go back and select the 6.3.1 toolset again?

Solution

  • Changing the Cordova CLI version in Visual Studio 2017 is not as straightforward as it would appear.

    Here are the steps I had to follow to change to Cordova 7.1.0 and cordova-android 6.3.0, surely it will allow you to move to Cordova 8.0 and cordova-android 7.1.0 as well.

    Follow these steps:

    Go to File > New > Project > Blank App (Apache Cordova)

    Open config.xml in View Code mode and find this:

    <vs:toolsetVersion>6.3.1</vs:toolsetVersion>
<engine name="android" spec="5.2.1" />

    Replace with:

    <vs:toolsetVersion>8.0.0</vs:toolsetVersion>
<engine name="android" spec="7.1.0" />

    Where 8.0.0 is your globally installed Cordova version.

    Select Device as target.

    Now Build > Build Solution

    Save, close and reload the project. When you access config.xml in designer mode you'll see Global Cordova 8.0.0 as the selected toolset.

    enter image description here

    In order to build you may need to use the external Android SDK Build Tools (API 27 I guess - it was API 26 for CLI 7.1.0) instead of the ones provided by Visual Studio (API 25).

    enter image description here

    Use the Android SDK Manager to manage versions, no need to get Android Studio for this.

    enter image description here

    Remember to follow the guidelines from Microsoft when changing the CLI on existing projects. However I strongly recommend creating a new one and then importing your files and adding your plugins to avoid potential problems.