Ionic 2 Visual Studio template - Live reload does not work

Question

I downloaded and installed latest version of the Visual Studio Ionic 2 templates for Visual Studio Tools for Apache Cordova. I am using Visual Studio 2017 Professional.

To my frustration, I've found that the live reload feature of the Cordova does not work at all. When I modify HTML, the only way for Cordova Simulate to reflect these changes is stop debugging and redeploy the project, which takes a considerable amount of time and makes the development workflow a real pain.

Another issue occurs whenever there is more than one Ionic project in progress. I found that because Ionic is using the same port for deployment then when one of the projects is launched, the launched app will get confused as to which app I'm requesting, and will often show the other app instead of the one I want.

Any ideas?

Answer 1

You need to manually configure the "watch" task to be started when the project is opened. Add the following field:

"ProjectOpened": [ "watch" ]

to the "-vs-binding" object in your package.json.

I believe, it was supposed to be there by default (upon project creation), but it isn't. Also, you could try to configure it via Task Runner Explorer, but it didn't work either (at least, for me).

Also don't forget to re-open your solution after that change.

Answer 2

Please see @scale_tones's answer for part of the answer.

I looked into this further and found that there was an extra step that needed to be made here to resolve the issue. It turns out that a fix was implemented for this issue, but it doesn't appear to have been released anywhere as far as I can see.

However, it is possible to apply the fix manually. To do that, follow these steps:

1) Copy the contents of the watcher.js file from Github here

2) Use your file explorer to search for the watcher.js file on your machine. On my machine, the file was located at the following location:

C:\ProgramData\Microsoft\VisualStudio\MDA\a43fc8f0\taco-toolset-6.3.1\node_modules\cordova-simulate\src\server\live-reload

Replace the watcher.js file with the one from Github. This fixed the issue for me, and live reload now works for me.