Building windows 10 App

I have just updated ionic to ionic 3. I created a project and project info looks like this:

global packages:

@ionic/cli-utils : 1.2.0
Cordova CLI    : 7.0.1
Ionic CLI        : 3.2.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.2.1
@ionic/cli-plugin-ionic-angular : 1.2.0
Cordova Platforms               : windows 5.0.0
Ionic Framework                 : ionic-angular 3.3.0

System:

Node       : v6.10.3
OS         : Windows 10
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed.

I have visual studio 2017 installed on my virtual machine. I have installed MS Build Tools separately. When I run a command
ionic cordova build windows
it gives me error:

> cordova build windows
:heavy_multiplication_x: Running command - failed!

[ERROR] Cordova encountered an error.
You may get more insight by running the Cordova command above directly.

[ERROR] An error occurred while running cordova build windows (exit code 1):

MSBuild v4.0 is not supported, aborting.
Error: AppPackages doesn’t exists.

Thanks in advance.

did you ever get this figured out? I’m getting the same error

@htbill I have no success till now.

Hey there.

Make sure to install Microsoft Visual Studio 2017 with the Windows 10 stuff checked.
I managed to create a Windows App on my computer at home, Cordova creates a project for Visual Studio I believe, this you can then open and compile it.

I might give you some more details on this once I’m home today from work.

yeah, I’ve done all that. it still won’t build. Now this was started on a Mac and then moved to a Win10 machine to compile for Windows. Not sure if that make a difference or not?

Wouldn’t think it should, really. Haven’t had the time yesterday to provide some more detail, sorry.

I’m just now looking at the Workloads you can choose when installing VS2017.
Make sure to definitely install the “Universal Windows Platform Development” and “Microsoft.VisualStudio.Workload.NetCoreTools”, maybe even the “Node.js” and “Microsoft.VisualStudio.Workload.NetWeb” one.

For sure I can’t say which ones you really need, when I installed VS2017 I simply got a bunch of the Workloads that were interesting for me. I’ll set myself a reminder on my phone so I get to creating a little video on how to build a Windows App with Ionic today.

On a different note: You could also try out using Electron as a wrapper for your Ionic App. I haven’t tried that myself, but I’m planning to in the future. There’s an article around the topic here => https://blog.couchbase.com/create-a-desktop-app-that-syncs-using-electron-pouchdb-ionic-2-and-couchbase/ (You can skip over the Pouch/CouchDB stuff if you just want the Electron bits.)

So I fumbled around a bit yesterday after work. Originally I planned on creating a small tutorial video, but then basically just muttered my way through that and decided not to do one. (Maybe later, when I prepare it some more.)

But my steps for building a Windows Application were the following:

(!!!) You need at least Windows 8.1 to build a Windows App! (!!!)

If you have not installed VS2017 yet, download the installer, select the “Universal Windows Platform Development” and “Microsoft Web Developer Tools” Workload during installation.

The official Cordova Documentation has some more details about the prerequisites needed: https://cordova.apache.org/docs/en/latest/guide/platforms/win8/index.html


  1. Create a new Ionic project (ionic start WindowsTest blank) (Used the latest version of Ionic)
  2. Go into the directory and execute ionic cordova platform add windows
  3. Execute ionic cordova build windows
  4. If that goes well you should find a Visual Studio .sln Solution inside platform/windows/ (This is essentially an Apache Cordova Project)
  5. Open that Solution in Visual Studio. (I used VS 2017 Community, 2015 should work as well.)
  6. The Solution should have 2 projects in it, one is the Windows App and the other one all the things of your Ionic Project.
  7. If you hit the Run button (Green arrow in the top menubar) it should start up just fine.
  8. Afterwards you can just create an Installer package via VS and provide that to people.

That’s pretty much what we’ve done here. Except we can’t seem to get past step #3

Finally I solved this issue by installing Build Tools for Visual Studio 2017. Assuming that you have already installed Visual Studio 2017 on your machine.

  1. Go the official website of Visual Studio 2017 .

  2. Scoll down a little bit and you will find a list of options.

  3. Expand Other Tools and Frameworks. Download and Install Build Tools for Visual Studio 2017.

  4. Go to System Environment Variables.

  5. Make a new variable with this Name and Path:
    VSINSTALLDIR = C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\

  6. Now go to your ionic Project and add these two lines in config.xml file:

  7. <preference name=“windows-target-version” value=“10.0”/

  8. <preference name=“windows-phone-target-version” value=“10.0” /

  9. Please Close the preference tag. This editor is hiding it if I put closing symbol.

  10. Open command prompt or terminal, go to your project directory and run this command:
    ionic cordova build windows

Hope it will help you guys.

8 Likes

Thx, it solve the problem

HI,
I’m new to build packages in Visual Studio
when you build iconic project which extension you got(.appx. .exe or .msi)
Is there is any way to package from .appx to .exe or .msi packages.
or
Build iconic framework cordova code to .exe or .msi package.

Thanks

hi @duke1102,

Building ionic windows app was success for me thanks.
Can you tell me how to create an installer package via Vs?

Thanks in Advance.

hi @gopi8227 ,

can you help me on how to create .exe Installer package via VS to provide to customer?