Ionic 2 and Visual Studio


#1

Hi all,

we are currently considering the development of a mobile app for Android, iOS and Windows Universal using Ionic 2. As a development environment we want to use Visual Studio (VS).

Using the Ionic 2 Templates (https://taco.visualstudio.com/en-us/docs/tutorial-ionic2/) we are able to create a project which can be build and tested. However, the structure of the project is totally different from the official docs - e.g. no src-Folder, no app.component.ts etc. So we are a little afraid that our project might not be compatible with the final release of Ionic 2.

Therefore, we tried to create a project using the CLI and to import the project into Visual Studio (as described here https://blogs.msdn.microsoft.com/rido/2016/05/11/ionic2-and-visual-studio/). However, the imported project produces various errors and we were not able to make the project compile (especially there is no gulp file).

So I have two questions:

  1. Has anyone successfully imported an ionic2 project (based on the latest beta) created from the CLI into Visual Studio and is able to built the project?
  2. Does anyone know about the Microsoft Ionic 2 templates and why these are so much different from the project structure described in the docs?

Best regards,
Thomas


#2

I’ve made my project from Ionic 2 RC0 CLI and using VSCode (not Visual Studio) to develop it.

Then I build the android, or windows version. When building the windows version I open the solution Ionic 2 build on “platforms/windows” folder. Open it on Visual Studio 2015 and build and run like any other project from Visual Studio.

No problem here. But I only use Visual Studio 2015 to debug my project. Not to develop it from start to end.

This I don’t know. As I said I make my projects using the CLI. I think the Ionic 2 project structure changed from “beta” to RC. Perhap you are using “beta” structure and Visual Studio is using the latest RC structure.


#3

I’m a heavy user of Visual Studio for .net stuff but barely use it for my Ionic2/node based projects. What’s your main motivation for using Visual Studio (debug or tfs maybe)? Have you tried VS Code? I know its not particularly useful when people say you should use the cli instead, especially if your are trying to use the VS emulators etc.

The tools/templates for cordova extensions in VS do trail behind quite significantly, so I’d suggest that unless drifty/ionic support them directly you should avoid them.


#4

Hi all,

thanks for the fast replies!

Our main motivation for using Visual Studio are the use of emulators for all platforms and the chance to debug on the device (especially for Windows).

Actually we also tried to use VS Code and Cordova Extension already. However, we were not able to serve or emulate an Ionic2 project (V1 worked). The process starts, the browser windows loads endless, and in VS Code a file called polyfill.js opens.

OK, but if I understand your recommendation correctly, we should / it is possible to

  1. Create the project using the CLI
  2. Develop in VS Code
  3. Serve and debug in emulator (for Android / iOS) in VS Code using the Cordova Extension
  4. Debug in emulator for Windows by importing the solution into Visual Studio

Would that be, in general, your current recommendation for the toolchain?

Thanks again,
Thomas


#5

For me this toolchain is the one that best works for now. :+1:


#6

OK, I will give it another try by the end of this / the beginning of the next week and reply again with further experiences!

Cheers, Thomas


#7

Hello again,

I couldn’t wait to test the new toolchain. However, for me, it does not work.

What I did:

ionic start Ionic2VSCodeTest sidemenu --v2
cd Ionic2VSCodeTest
ionic platform add android (gave me several times "BUILD SUCCESSFULL")
ionic platform add windows

Then in VC Code (with installed Cordova Extension) I selected “File -> Open Folder -> Ionic2VSCodeTest”. Then switched into debug tab and configured as “Cordova”.

When running “Simulate Android in Browser”, a new chrome windows opens and says “Not Found”. In VSCode a windows with a map opens, the console says

Launching for android (This may take a while)...
Attaching to app

When running “Serve to Browser (ionic service)” I first got timeouts (added “devServerTimeout”: 120000 to config) and now the browser opens, loads endless and in VS Code a window with a file called “polyfill.js” and a windows with a map opens. The console says

Launching for serve (This may take a while)...
Starting Ionic dev server (live reload: true)
Building and deploying app
Attaching to app

Using the CLI to serve and emulate works.

Any ideas what is going wrong here? Maybe I need a beta version from VSCode or the Cordova Extension?

Cheers, Thomas


#8

Where able to get the latest RC to work within Visual Studio? I am trying to create an application that will work for iOS, Android and Windows. I would like to use Visual Studio to build and deploy the app for Windows. I run the build script within VS and it appears to work however when I go to run the app to debug or deploy from VS I get several errors. I believe the errors arrive from the following one:

Error TS1204 Cannot compile modules into ‘es2015’ when targeting ‘ES5’ or lower. TypeScript Virtual Projects 1 Active

After that I have several TS2307 errors (Cannot find Module). There are also a lot of TS2339 errors (Property … does not exist)

EDIT: There are also times when I only get one error: MSB6006 tic.exe exited with code 1


#9

The Visual Studio template for Ionic2 RC is here http://vsixgallery.com/extension/Ionic2TemplatesVSIX.vstacotools.c21c1eb1-0003-4b07-9111-7a85b80755e4/