Wednesday, April 29, 2015

Using Ionic with Visual Studio Tools for Apache Cordova

Ionic has been gaining in popularity as a free and open source mobile development framework. It leverages AngularJS and SASS to provide a quick start to mobile development for iOS, Android and Windows.

The newly released RC of Visual Studio 2015 Tools for Apache Cordova (VS TACO) makes it easier to create Ionic apps using two different methods.

Method 1: Using the Ionic Templates for TACO

The easiest way (but not the best way) to create a new Ionic project using VS TACO is to use the new Ionic project templates, which are available on the Visual Studio Gallery.

However, there are currently some issues with using the template method:
  • at the time of this writing, the templates do not work with Windows Phone and Windows apps.
  • you are not guaranteed to get the latest Ionic CLI output when using the templates.
  • not all of the Ionic CLI templates are included in the VS Templates.
If any of these are issues for you, then continue to Method 2 below!



Method 2: Importing an Ionic Project

This second method involves creating an Ionic project at the command line, and then importing the source into a VS TACO solution. The advantage of using this method is that you will be sure to have the latest Ionic template source, and you have full control over what you bring into your project.

  1. Be sure you have ionic installed - you can install by typing the following at the command line.

    npm install -g cordova ionic
  2. Now, use Ionic to create a starter project. Ionic supports three different templates: blank, tabs, and sidemenu. To create the tabs template:

    ionic start myApp tabs

    NOTE: instead of tabs in the command above, you can also select blank or sidemenu.
  3. Next, create a Visual Studio 2015 TACO solution using the Blank App template:

  4. From the Visual Studio TACO solution you just created, select the following files and folders:


    ... and copy them to the "myApp" folder that you created using Ionic in Step 2.
  5. Open the myApp.jsproj file from the Ionic folder. Select "Save All" so that a new Solution (.sln) file is created for this project.
  6. Open index.html and add a reference to platformOverrides, which allows dynamic elements to work in Windows and Windows 8 apps:

    <script src="scripts/platformOverrides.js"></script>

    (if you are curious where this file is coming from, look in the merges/windows/scripts subfolder)
  7. At this point, you can run your Ionic app against Android, iOS, and Windows. Go ahead and try it! Note that Ionic does not _fully_ support Windows and Windows Phone platforms, but the Ionic team is working on getting full compatibility with Windows platforms.
  8. For Windows Phone 8.1 support (Windows Phone (Universal)), you will need to make one more tweak: add the following two nodes to config.xml:

    <preference name="windows-target-version" value="8.1" />
    <preference name="windows-phone-target-version" value="8.1" />

7 comments:

  1. Hello and thanks for your post!

    My App works "somehow" on WP 8 but not on WP Universal (JavaScript runtime error: module cordova/windows8/commandProxy not found). Occurs in AppVersionProxy.js @ require("cordova/windows8/commandProxy").add("AppVersion", AppVersionProxy). I guess it could be about the AppVersion plugin (UK.whiteoctober).

    When trying to run it on windows the app closes still being on the launch screen and I don't see what's the error. What about those security issues and jQuery described in the post for VS 2013 and CTP3? I guess this should be fixed with the winstore-jscompat.s?

    regards

    ReplyDelete
    Replies
    1. the winstore-jscompat js file that ships with VS2015 RC templates should be good to go (it has the fixes in it).

      When your Windows app crashes, do you see anything in the JavaScript console in VS?

      Delete
  2. Severity Code Description Project File Line
    Error MSB3073 The command "platforms\android\cordova\clean.bat" exited with code 2. myApp C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\ApacheCordovaTools\vs-mda-targets\Microsoft.MDA.FileMirroring.targets 354

    I got this error when I build after perform all the steps.

    Please help me.

    ReplyDelete
  3. Hey OSI,
    I had same problem like yours. Delete all folders in platform folder and rebuild the project. This solved the trouble for me.

    ,best regards.

    ReplyDelete
  4. its works very well. Thanks for sharing

    ReplyDelete
  5. There's an easier workflow listed here (may not have existed when you wrote the article) https://taco.visualstudio.com/en-us/docs/tutorial-ionic/

    ReplyDelete
  6. Severity Code Description Project File Line Suppression State
    Error 1. "SDK Platform" for android-23 FirstCardovaApp 1
    Error 2. "Android SDK Platform-tools (latest) FirstCardovaApp 1
    Error 3. "Android SDK Build-tools" (latest) FirstCardovaApp 1
    Error Hint: Open the SDK manager by running: "C:\Users\ssss\AppData\Local\Android\sdk\tools\android.bat" FirstCardovaApp 1
    Error Please install Android target: "android-23". FirstCardovaApp 1
    Error You will require: FirstCardovaApp 1


    I got this error when i build project. Please help me

    ReplyDelete