LiveEdit issue with Angular - After page refresh it stop working Follow

Created August 07, 2021 03:34

Hello,

I am using WebStorm 2021.1

I have angular app and the following debug configurations:

{
...
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
...

To debug the app, I do the following steps:

1. I click here

2. Then I click on this url while holding CTRL+SHIFT

At this point, live edit works great.

When I click on something in the code, I see the part highlighted in chrome window

Issue

The issue is that once I changed the HTML code, it refresh the page and this is fine.
The problem is that after the page refreshed, the live edit functionality not working anymore.
I mean that it will no longer highlight the selected element in chrome.
The same issue is also if I refresh the page myself. In any case, after page refresh (that can be triggered automatically or directly in chrome), this feature no longer works.

Any way to solve it?

I searched if anyone reported about it before but I found nothing

6 comments

Elena Pogorelova

Created August 07, 2021 15:27

Live Edit only works for simple HTML apps - dynamic DOM changing, all sorts of web components (Angular, React, Vue, etc), templates and routing are not supported. For complex frameworks like Angular live reload is implemented on the server end - once you change your components code/template/etc. and save changes, the application is (partially) re-built and the pages are reloaded. This is Angular cli that takes care of this - when using ng serve to run the app hot reload is enabled by default

>To debug the app, I do the following steps:

You shouldn't run the Angular CLI Server run configuration in debugger unless you like to debug the Angular cli itself. To debug the Angular app, please run this configuration and then either click on the url while holding CTRL+SHIFT (this action auto-creates a JavaScript Debug run configuration for this URL and attaches a debugger to it) or debug the autogenerated Angular Application run configuration

See Angular | IntelliJ IDEA (jetbrains.com)

Gileli121

Created August 07, 2021 16:45

Thanks for the help.

But you got me wrong.

I am doing what you said.
I am holding CTRL+SHIFT and click on the URL.

It works. But after I did some change, it reload the page and after it reloaded the page, LiveEdit no longer works.
I can't see what I selecting anymore.

You say that this is how it is and there is no support for it?
I really want it to work always (also after page reload)

Elena Pogorelova

Created August 07, 2021 17:09

>I am doing what you said.

No, not exactly. You are _debugging_ the Angular CLI Server run configuration; you shouldn't do it, just run it

>You say that this is how it is and there is no support for it?

Yes, as I wrote, Live Edit doesn't work for Angular

Gileli121

Created August 07, 2021 17:13

Is there some other way to enable the live edit functionality for Angular?
If not than I really want that you add support also for Angular.

Thanks.

Elena Pogorelova

Created August 07, 2021 18:05

No way; and it doesn't seem to worth efforts as, as I wrote above, the live reload for Angular is done on the server end, i.e. the page is updated instantly once you change the code