0

I am trying to get live edit working on my AngularJS project.

The project has about 300 JavaScript files. I was previously using gulp to concatenate these files into one and then watching the concatenated file with LiveReload.

That was becoming a bit slow, because the whole page was being reloaded every time I made a change to the JavaScript.

I was hoping that WebStorm's LiveEdit would be able to do it more quickly, so I have stopped concatenating the JavaScript files for dev and injected the 300 script tags into index.html instead.

I am also compiling all my html templates into a js file using gulp angularTemplateCache.

Now, when I start the debugger and change an html template, gulp recompiles the templates and the change is instantly reflected, without reloading the page, which is exactly what I want.

However, when I change any of the other js files the changes do not appear until I refresh the page in the browser.

If I use LiveReload on the page, the page is automatically refreshed when I change html or .js files.

What am I missing?

LazyOne
  • 158,824
  • 45
  • 388
  • 391
kpg
  • 7,644
  • 6
  • 34
  • 67
  • I should mention that the template file is on a different path to the other js files, but I can see all of them in the debugger > elements window. – kpg Mar 24 '15 at 15:25
  • Also, I have seen http://stackoverflow.com/questions/15581070/webstorm-not-refreshing-modified-javascript-files?rq=1 , but don't see a real answer there – kpg Mar 24 '15 at 15:31
  • Please make sure that 'Update' in Preferences/Build, Execution, Deployment/Debugger/Live Edit is set to 'Auto in (ms)' and 'Restart if hotswap fails' is enabled. Changes in HTML code are updated in the browser automatically regardless of the selected Update mode; but this is not the case for js and css - in Manual mode, you need to click the Update Application button on the debugger tool window or in the main Run menu, or press cmd+F10 to get page refreshed. – lena Mar 24 '15 at 15:53
  • @lena thanks but I do have those settings. – kpg Mar 24 '15 at 16:13
  • looks like angular-specific issue. See [WEB-7734](https://youtrack.jetbrains.com/issue/WEB-7734) and linked bugs – lena Mar 24 '15 at 18:36
  • @lena I am not using ng-include in the page, but I think my issue is similar to https://youtrack.jetbrains.com/issue/WEB-6471, fixed in Chrome extension 2.0.5. I am on 2.0.7. AFAIK, my templates are being loaded from a .js file (by $templateCache), not html files . Templates are compiled by my gulp watch task, and it seems the resulting .js file is correctly reloaded. The other .js files are not touched by my gulp watch task and are not reloaded. – kpg Mar 25 '15 at 06:10
  • Curiously, if I make the .js file a .ts file (WebStorm 10), the page is automatically refreshed – kpg Mar 25 '15 at 07:45

0 Answers0