Visual Studio 2015.2 and Ionic v2 - anyone?

[Daixtrose]

Hi!

I was trying to set things up to run within Visual Studio 2015.2 professional (not VSCode) and got stuck in many aspects. I first ran the CLI commands to create the app

npm install -g ionic cordova
npm install -g ionic-framework cordova
npm install -g ionic@beta
ionic start myAppName --v2 --ts

Then I used VS2015.2 and imported the project. The project builds, but running it with Ripple yields a blank page and the following output on Javascript Console:

Ripple :: Environment Warming Up (Tea. Earl Grey. Hot.)
ripple.js (37,14889)
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's             experience. For more help, check http://xhr.spec.whatwg.org/.
ripple.js (51,4377)
Failed to load resource: the server responded with a status of 404 (Not Found)
ripple.js (51,4377)
cordova :: Initialization Finished (Make it so.)
ripple.js (37,14889)
HTML1300: Navigation occurred
index.html
Current window: http://localhost:4400/index.html
Uncaught TypeError: Cannot set property XMLHttpRequest of [object Object] which has only a getter
angular2-polyfills.js (916,25)
Failed to load resource: the server responded with a status of 404 (Not Found)
app.bundle.js (0,0)

Any idea what might have gone wrong?

[shyamal890]

@Daixtrose

ne

It seems I also created same question

How to work with Ionic 2 in Visual Studio 2015?

I created a ionic starter project following Ionic V2 Guide . It also works perfectly with ionic serve from CLI. However, when I load it as an existing cordova app project in Visual Studio 15, I get following errors at runtime: angular2-polyfills.js:916 Uncaught TypeError: Cannot set property XMLHttpRequest of [object Object] which has only a getter decorators.ts:245Uncaught reflect-metadata shim is required when using class decorators

[Daixtrose]

OK, this is surprising for me, but the problem can be solved by clicking on config.xml and switching the installed Cordova version by selecting the option “Use globally installed Cordova version”. Seems that importing a Cordova project into Visual Studio 2015.2 does use the Visual Studio version of Cordova, not the one used originally.

[sveinla]

That didnt work for me.

I have reinstalled all - Nodejs, VisualStudio, ionic, cordova - everything, but still no luck.
Now i have this:

Uncaught TypeError: Cannot set property XMLHttpRequest of #<Window> which has only a getter - angular2-polyfills.js (916,25)
Uncaught reflect-metadata shim is required when using class decorators

Any other suggestions to try?

[Daixtrose]

Which version of Node.js did you try? v4.4.3 LTS or v5.10.1 Stable?

[sveinla]

@Daixtrose I tried all versions - version 4.x and 5.x - both 32 and 64 bit version.

[Daixtrose]

Sad this did not help. So it is a typical “it works on my machine” scenario.

In the meantime I feel very uncomfortable with mixing versions of node.js. According to this blog post Visual Studio 2015 comes with Node 0.12.9 and NPM 2.14.9. I guess that might lead to problems when trying the Ionic 2 which recommends 4x version of node for stability. It is totally unclear how the Visual Studio plugin and node 4x interact.

[sveinla]

@shyamal890 did you get this to work?

@Daixtrose i found that you can set path to your own node install in the settings - here is how mine looks like after adding global nodejs

Also this might have to be unchecked:

[Daixtrose]

I found this advice how to change the version, still investigating …

[Daixtrose]

BTW. I’d prefer sandboxing here.

[tim]

What browser does Ripple use? The error looks like an error in zone.js. I wonder if there is some issue with zone.js in Edge, which would cause everything to break since zone is failing and reflect-metadata never gets defined.

[Daixtrose]

I also believe it might be a browser issue. My solution works under Windows 10 with Chrome.

[sveinla]

Ripple requires Chrome. I tried to uninstall to try it open in firefox, but then ripple complained it needs chrome installed. There is a little chance that this error started for me after i updated chrome to latest version.

[tim]

Just took a look at it - it looks like Ripple does get in the way of zone.js. Even when manually working around Ripple patching XMLHttpRequest before zone did, change detection failed to work.

Loading the app without Ripple had a lot of issues as well, the biggest one being this: http://stackoverflow.com/questions/28539479/application-infinite-loop-with-processmessage-failed-error. I had this error with a v1 Ionic app as well, when targeting the web platform (using Ripple). Also, for some reason Ripple seems to be looking for config.xml in www.

With the numerous issues and alert dialogs for every 3rd party plugin call, maybe using the Cordova browser platform with Chrome device emulation will provide a better experience: https://developer.chrome.com/devtools/docs/device-mode. I would suggest testing plugins with real devices (if you don’t have a Mac) or actual simulators.

I don’t develop on Windows and haven’t used Ripple much, so maybe there’s a better workflow - let us know if there is!

[Daixtrose]

@tim I would prefer the alternate path, i.e. not install a global node, etc., but to have it updated and kept together in a sandboxed environment within VS2015.2

I could not figure out how to get started within Visual Studio.

[tim]

Yeah I can understand that, although I’m not sure how much the node version matters in this case. I think any difference in behavior may be related to the difference in Cordova versions, which if you can manage within Visual Studio would allow you stay there with no global node installation. I think the problem with remaining in VS is the Ripple emulator, since I don’t believe any Angular 2 applications will work with Ripple because it appears to break Angular’s change detection (which is powered by zone.js).

Considering Ripple is no longer maintained: http://incubator.apache.org/projects/ripple.html (as far as I can tell), Still maintained! See below. It may be worth it for us to reach out to Angular and/or the VS team to see if the problem can be solved on either end by making zone.js Ripple compatible, or potentially removing Ripple in favor of a different solution.

[shaikhspear]

Did it work for any one yet?
I have tried all the suggestions above. Nothing worked for me.
New to Ionic. Any Help Plz !!!

[shaikhspear]

Hello every one . I was able to figure out ripple issue with VS2015. I first ran the application from CLI using the ‘ionic serve’ command. From the browser URL I noted the port application was running on my machine. I assigned the same port in visual studio settings as below. Strange VS didn’t figure out itself for Ionic v2 as it did for Ionic v1.

I have a similar question open for remote build Ionic 2 application from Visual Studio 2015.2 .

Ionic 2 application shows white screen on IOS remote build

I have created a tabs/sidemenu template application with ionic 2 and --ts as I wanted type script in my project. Whenever I try to remote build the application through Visual Studio 2015 on IOS (device/emulator) a white blank screen is shown. Nothing Happens after it. I was successfully able to remote build the application with the same configuration for a Ionic 2 blank template and Ionic 1 (tabs/sidemenu/blank) I have read through the blogs, white screen is a common problem with Ionic 2. Not…

I have no experience working on MAC and IOS. It would be great If anyone can relate the issues and help me out.

[timb]

Tim - I just wanted to mention that Ripple is still maintained, it has just been retired as an Apache incubator project. It now lives at https://github.com/ripple-emulator/ripple. I’d be interested in understanding exactly what the conflict is here. Feel free to email me (tim.barham at microsoft). Thanks!

[tim]

@timb oh that’s great news. Email sent, thanks!