If you work on a Apache Cordova project in Visual Studio 2013 using Visual Studio Tools for Apache Cordova CTP 3 or 3.1 you should know there are important breaking changes in migrating the project from Visual Studio 2013 to Visual Studio 2015. The project can be migrated, but you have to do everything manually, as Visual Studio is not able to apply the changes automatically.

First of all, Visual Studio Tools for Apache Cordova CTP3.x are not longer supported in Visual Studio 2013 in the first place. If you try to install Update 5 it will prompt you to remove it before continuing.
vs2013u5
This is explained in the release notes for Update 5.

Also note: All prior releases of the Tools for Apache Cordova are incompatible with Update 5. If you have previously installed a Tools for Apache Cordova CTP extension, you must uninstall that extension before installing Visual Studio 2013 Update 5. If you require Apache Cordova support, we encourage you to try Visual Studio 2015.

The options for those developing with the VS tools for Apache Cordova in VS2013 are either to switch to Visual Studio 2015 or not install the last update and continue to work with CTP 3.x in VS2013.

In this article I will show you how to migrate a Cordova application from VS2013 to VS2015 and I will exemplify with a test application.

I have this app called TestApp. It’s built with Ionic and AngularJS. It is a JavaScript app, not a TypeScript app, but this works just the same regardless what language you use. It has the following project structure, with the Javascript source code in a folder called app, the libraries in libs and the templates in views. There are other folders apart from the ones VS has created, mainly css and images.

vs2013proj1 vs2013proj2

The application is just a test, it doesn’t do anything but it works for both Android and iOS.

ripple1 ripple2

When you open this project in Visual Studio 2015 it is not loaded. Visual Studio complains that “This project is incompatible with the current edition of Visual Studio.”
vs2015proj1
You have to covert it manually in order to make it available for Visual Studio 2015. Fortunately, the steps to do this are documented, but not in MSDN as one might expect, but on GitHub. There is a document called Known Issues – Visual Studio 2015 that explains what has to be done.

  • Create a new empty Apache Cordova app. The only purpose of this app is to copy from files to your actually project.
    vs2015proj2
  • Copy the .jsproj and taco.json files into the project folder of the application you migrate. Make sure you overwrite the existing .jsproj with this new project file.
  • Delete the existing bin and bld folders
  • Create a folder called www
  • Move everything except for config.xml and folders merges, res and plugins to the www folder.

If you open the project again in Visual Studio 2015 it will work and you can build and run it. For my test application the new project looks like this.
vs2015proj3

You can see that the all the folders and files under the www folder appear automatically in the solution explorer. They are not added with a Content or Folder element in the .jsproj file. You can make a comparison of the old and new .jsproj and see how simplified the new file is.
jsprojcompare1

Another thing to notice here is that the NodeJS module used for building the project is no longer called vs-mda (i.e. Visual Studio Multi-Device Application) but vs-tac (i.e. Visual Studio Tools for Apache Cordova).
jsprojcompare2

However, when I tried to build I got the following error:

MSBUILD : cordova-build error BLD401: Error : BLD00401 : Could not find module ‘delayed-stream’] code: ‘MODULE_NOT_FOUND’. Please Go to Tools –> Options –> Tools for Apache Cordova –> Cordova Tools –> Clear Cordova Cache and try building again.

This might have been related to the version of Apache Cordova I had globally installed, i.e. 5.1.1. If you get the same install it via npm.

However, you may still get problems when you try to build for Android.

MSBUILD : cordova-build error BLD10205: Please install Android target “”
You may not have the required environment or OS to build this project
MDAVSCLI : error : cmd: Command failed with exit code 2

The Android target name is empty, but if you do a Rebuild you get more information and actual required target name:

[Error: Please install Android target: “android-21”.

Hint: Open the SDK manager by running: C:\Program\ Files\ (x86)\Android\android-sdk\tools\android.BAT
You will require:
1. “SDK Platform” for android-21
2. “Android SDK Platform-tools (latest)
3. “Android SDK Build-tools” (latest)]
C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\ApacheCordovaTools\vs-mda-targets\Microsoft.MDA.FileMirroring.targets(352,5): error MSB3073: The command “platforms\android\cordova\clean.bat” exited with code 2.

These can be installed using the Android SDK Manager. Make sure you select all the mentioned components.
android1
With these changes you can build successfully for Android.

One more thing here is the version of Apache Cordova used by vs-tac to build. vs-tac uses Cordova 4.3.1, but I already had Cordova 5.1.1 installed on my machine and used by vs-mda. If you have a newer Cordova version than 4.3.1 what you have to do instruct vs-tac to use this one in the taco.json file.

Replace the version 4.3.1 of the cordova command line interface with desired version (in my case 5.1.1). When you rebuilt it will install it and build with it.

Your environment has been set up for using Node.js 0.12.7 (x64) and npm.
—— Ensuring correct global installation of package from source package directory: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\ApacheCordovaTools\packages\vs-tac
—— Name from source package.json: vs-tac
—— Version from source package.json: 1.0.0
—— Package already installed globally at correct version.
—— Installing Cordova tools cordova@5.1.1 for project from npm. This could take a few minutes…

You can find the various Cordova versions installed under %APPDATA%\npm\node_modules\vs-tac\node_modules\cordova.
vstac3

For more information see:

, , , , Hits for this post: 22633 .

When you create a Cordova project with Visual Studio Tools for Apache Cordova it generates a set of splash screens for all supported iOS (both iPhone and iPad) resolutions. These are found under res\screens\ios.

Visual Studio project showing the splash screen images.

Visual Studio project showing the splash screen images.

XCode project showing the splash screen images.

XCode project showing the splash screen images.

There are two things to notice here:

  • First, the names in Visual Studio are like screen-iphone-portrait.png or screen-ipad-portrait.png and in XCode are like Default~iphone.png or Default-Portrait~ipad.png.
  • Second, if you actually look at the files you’ll see they are not the same. The splash screens generated in VS are ignored and default Cordova images are used.
Default Visual Studio splash screen image for iPhone.

Default Visual Studio splash screen image for iPhone.

Default Cordova splash screen image for iPhone.

Default Cordova splash screen image for iPhone.

You can see the default Cordova splash screen image in the iOS built if you open the generated XCode project on the Mac where the iOS app is built.

Splash screen image in the XCode project generated by Cordova.

Splash screen image in the XCode project generated by Cordova.

The questions are: why are the file names different in Visual Studio and XCode, and why are the images not correctly copied from Visual Studio project to XCode project.

I’ll start with the second question. The problem here is that just because the files are in the Visual Studio project does not mean much. If you open the Cordova configuration file, config.xml, it only contains this (for a newly created blank project):

However, if you look at the Cordova documentation for images and splashes you’ll see the config.xml file should contain something like this:

The names here look like the ones that appear in the XCode project. But key is the platform element with its splash children. We have to add these to the config.xml file, but it can only be done by manually changing the configuration file, as Visual Studio Tools for Apache Cordova do not support this in the IDE yet.

Note: the Visual Studio names for the splash screens were used here, not the Cordova ones.

With this change, when you build, the right splash files are generated for the application.

XCode project with correct splash screen images.

XCode project with correct splash screen images.

This leads us to the first question: why are the file names different in Visual Studio and XCode and how are they mapped correctly? If you set the MSBuild output to Diagnostic, you’ll see something like this in the output:

1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-ipad-landscape-2x.png to res\screens\ios\screen-ipad-landscape-2x.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-ipad-landscape.png to res\screens\ios\screen-ipad-landscape.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-ipad-portrait-2x.png to res\screens\ios\screen-ipad-portrait-2x.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-ipad-portrait.png to res\screens\ios\screen-ipad-portrait.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-568h-2x.png to res\screens\ios\screen-iphone-568h-2x.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-landscape-736h.png to res\screens\ios\screen-iphone-landscape-736h.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-portrait-2x.png to res\screens\ios\screen-iphone-portrait-2x.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-portrait-667h.png to res\screens\ios\screen-iphone-portrait-667h.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-portrait-736h.png to res\screens\ios\screen-iphone-portrait-736h.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-portrait.png to res\screens\ios\screen-iphone-portrait.png (TaskId:36)

and

1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-portrait.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default~iphone.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-portrait-2x.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default@2x~iphone.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-ipad-portrait.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Portrait~ipad.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-ipad-portrait-2x.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Portrait@2x~ipad.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-ipad-landscape.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Landscape~ipad.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-ipad-landscape-2x.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Landscape@2x~ipad.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-568h-2x.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-568h@2x~iphone.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-portrait-667h.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-667h.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-portrait-736h.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-736h.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-landscape-736h.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Landscape-736h.png (TaskId:36)

Here is a table of the iOS splash screens with the mappings between Visual Studio files and Cordova files.

Resolution Device Model VS file Cordova file
320×480 iPhone 1st Gen, 3G & 3GS screen-iphone-portrait.png Default~iphone.png
640×960 iPhone 4 & 4S screen-iphone-portrait-2x.png Default@2x~iphone.png
640×1136 iPhone 5, 5C & 5S screen-iphone-568h-2x.png Default-568h@2x~iphone.png
750×1334 iPhone 6 screen-iphone-portrait-667h.png Default-667h@2x~iphone.png
1242×2208
2208×1242
iPhone 6 Plus screen-iphone-portrait-736h.png
screen-iphone-landscape-736h.png
Default-736h@3x~iphone.png
Default-Landscape-736h.png
768×1024
1024×768
iPad 1, 2 & Mini screen-ipad-portrait.png
screen-ipad-landscape.png
Default-Portrait~ipad.png
Default-Landscape~ipad.png
1536×2048
2048×1536
iPad Air & Mini Retina screen-ipad-portrait-2x.png
screen-ipad-landscape-2x.png
Default-Portrait@2x~ipad.png
Default-Landscape@2x~ipad.png

Note: Though the actual iPhone 6 devices are down-sampled to a resolution of 1080×1920, the splash images must have the size of 1536×2048 and 2048×1536 pixels.

Note: Also take notice that for iPhone 6 Plus, unlike all the other iPhone models, you must provide both portrait and landscape splash screens (just like with iPads).

But where are the mappings handled? In the cordova-lib module there is a file called ios_parser.js where you can find the following code:

This code shows an array of (source) splash screens as defined in the config.xml file and an array of pre-defined target splash screen files and their expected resolution. The splash screens in these arrays are mapped by their size (width and height) and source files are copied into destination files. This means that the actual source file names are not important, and in fact you can name your files in any way you want, with the right size they will be correctly mapped.

Note: Be aware of a subtle issue: just copying content from the Cordova documentation for images and splashes to your config.xml file and changing file names won’t work. The path in the Cordova docs looks like res/screen/ios/ while the Visual Studio project path is res/screens/ios/. The mismatch of screen and screens can lead headaches trying to figure out why splash screen images are not correctly setup.

, , , , , , Hits for this post: 20623 .

Visual Studio Tools for Apache Cordova (VSCordovaTools for short) is a great Visual Studio toolset to develop hybrid applications for multiple platforms, including Android, iOS and Windows. One of the nice things about the tool is that it installs everything you need to develop with Cordova. You don’t have to care about installing multiple components, runtimes, setting system environment variables, etc. However, one of the drawbacks is that it is not currently supporting updating those components to newer versions.

The latest release available for VS 2013 is CTP 3.1 and this build comes with Cordova 3.5.0. Should you need to use a newer version you have to do it manually. In this blog post I will list all the steps you need to do to update to the latest version Cordova (currently 5.1.1) both on Windows and on Mac (where you build the iOS version of the hybrid apps). However, in these steps I will also include how to update Node.js and npm.

Update Cordova on Windows

Note: Make sure you close all instances of Visual Studio before starting this process.

  1. Download and install the latest version of Node.js from nodejs.org.
  2. Update npm. To check your current npm version run the following command in a console:

    To update to the last version of npm run the following command in a console (elevated As Administrator):
  3. Update Cordova. To check your Cordova version run the following command in a console:

    To update to the last version of cordova run the following command in a console (elevated As Administrator):
  4. Update the vs-mda version of Cordova with the latest you just installed in the previous step. Cordova is (globally) installed at %APPDATA%\npm\node_modules\cordova. vs-mda copy of Cordova is available at %APPDATA%\npm\node_modules\vs-mda\node_modules\cordova. Replace the entire content of this folder with the one of the global Cordova installation.
  5. Install missing modules (this might depend on the latest version you install). For 5.1.1 I had to install concat-map and balanced-match. If anything else is necessary it should show up in the output log when you build your Cordova project.

Update Cordova on Mac

Note: Make sure you stop the vs-mda-remote agent before performing this upgrade.

  1. Open a Terminal session and run the following command:
  2. Update the vs-mda-remote version of Cordova with the the latest you just installed in the previous step. Cordova is (globally) installed at /usr/local/lib/node_modules/cordova. vs-mda-remove copy of Cordova is available at /usr/local/lib/node_modules/vs-mda-remote/node_modules/cordova. Replace the entire content of this folder with the one of the global Cordova installation.
  3. Restart the vs-mda-remote agent.

With all these installed you should be all set to start building with the latest version of Cordova.

, , , , , , Hits for this post: 21483 .

I have recently upgraded my SSD disk to a newer and larger one. To avoid the hassle of re-installing everything (I have a lot of things to install) I cloned the disk. Everything worked fine. No problems with the operating system and the applications, except for Visual Studio. Though I could start, edit, build, run, etc. some things just did not work.

When I opened a solution with both C++ and .NET projects I noticed that the C++ projects took a lot to initialize. When I say a lot I mean minutes, many minutes. That didn’t seem right, but I had patience. However, after they finally passed the Initializing phase I noticed that it was no possible to select the configuration and target for the solution to build. The combos were disabled and nothing was displayed there. I could actually build, but it was the last selected configuration and target that were built. I tried deleting generated files (such as the .suo file) and after that, the last selections appeared in those combos, but they where still disabled.

vstrb3

Then I noticed that the properties window was not able to show anything, whether it was the properties of the project, a file or a reference. Everything was very slow. I could edit, but sometimes it took seconds for the text to show up. When I checked the resource monitor, it turned out that Visual Studio was using 17-18% of my CPU.

vstrb1

Finally, I noticed a warning when I closed the solution:

vstrb2

The .sdf file was not present in the specified location. So then I figured it must be a problem with Microsoft SQL Server Compact. Therefore I downloaded the kit from the download center and installed it again. That worked like a charm. Visual Studio was able to create the missing .sdf file, the Visual C++ projects loaded very fast and all other symptoms disappeared.

My conclusion was that cloning the hard-disk didn’t work well for SQL Server Compact. But the problem is that Visual Studio doesn’t react well when this component is missing. It should display the warning about it when it fails to create the file, not when you close the solution.

, , , , , Hits for this post: 21026 .

The C++ REST project provides a modern asynchronous C++ API for cloud-based client-server communication. It is available on codeplex and works with Visual Studio 2010 and 2012, but it is now distributed with Visual Studio 2013. The preview version of VS2013 deploys version 1.0 of the SDK. Since its release a new version of the SDK (v1.1.0) has been made available.

The following example shows how to retrieve and display some JSON content. I’m querying google using its REST API. Here is how a query (for a single result) may look:

https://ajax.googleapis.com/ajax/services/search/web?q=marius%20bancila&v=1.0&rsz=1

The result that we get is a JSON value. From this value I will only display the URL and the (un-formatted) title.

There are several things that we must do:

  • create a http_client that maintains the connection to a HTTP service
  • send a HTTP GET request asynchronous and wait for the response
  • when the response is available check its status code and if all is right extract the JSON value from the body of the response message (the content type must be application/json)
  • when the json value is available display its content

The code looks like this:

The following program retrieves 5 search results for “marius bancila”.

The output looks like this:

You can find documentation for the API and the SDK here.

, , , Hits for this post: 50632 .

Go to definition (F12 in Visual Studio) is such an intensively used command, but it opens a new window for the document. Visual Studio 2013 adds a new go to definition command that actually displays the definition inline, in the same window. It’s called Peek Definition and the shortcut is ALT+F12.
vs2013_pd1

It opens an embedded window inside the current window, displaying the definition.
vs2013_pd2

However, it is possible to peek another definition and so on. All peeked definitions are displayed in the same window in a tabbed manner (the little circles on top are the tabs).
vs2013_pd3

It is possible to re-size this window’s height and promote a particular tab to a new document window.

, , Hits for this post: 24372 .

Visual Studio 2013 provides developers with the ability to sign in with a Microsoft account and synchronize settings across devices (and as new versions will be released across different versions of Visual Studio).

When you first launch Visual Studio 2013 you are asked to sign in (you can skip that and do it any time later) using a Microsoft account.
vs2013signin1

You have to specify several details such as full name, email address and preferred development environment settings.
vs2013signin3

On the top-right corner of the IDE main window you can open the identity card for your primary online identity.
vs2013signin4

If you are not logged in a link for the sign in window is available in that corner.
vs2013signin5

After your initial profile settings is created whenever you logon to new devices your settings will be automatically downloaded and enabled for you. When you logout from a device Visual Studio stops roaming settings to or from that devices but leases the last settings that were synced as they were when you logged out.

You can control what features you want to synchronize from Tools > Options > Environment > Synchronized Settings.
vs2013sync
The features available in the Preview for synchronization are:

  • Appearance (theme, fonts and color) settings
  • Text editor settings
  • Key bindings
  • Start-up settings
  • Environment aliases

You can read more about these features here:

, , , , , Hits for this post: 44191 .