angular-devtools
angular-devtools copied to clipboard
rangle
Empty div tag cause dev-tool failed to parse the angular components
Angular DevTools version (required): latest
**Angular version (required):**12.0.3
Link to a minimal stackblitz reproduction (strongly encouraged): Very simple you can reproduce in any environment based on the screenshot below
Description of issue:
- Include (clipped) screenshot images if possible.
Steps to reproduce:
- If there are empty tag inserted to the index.html. Then there will be error "ASSERTION ERROR: The provided value must be an instance of a DOM Node but got [object HTMLDivElement]". And the dev tool did not show any content.
Hi Dev Team,
Thank you very much for creating this very useful dev-tool! I had encountered this wired issue. And after debug the code, I found if the empty div tag is inserted after "", then dev-tool will throw error and stop working. I am still investigating who insert that empty div tag in my project. I believe I could fix this issue for my own project just by remove that empty div tag. Create this bug just FYI. Maybe some other users will encountered same issues as I am. It is really wired and frustrating.
Thanks, Joey
I figured out the empty div tag was added by a third party tool called "appcues". We have to rely on this, so I can do noting to these two empty div tag. I have a workaround now. To delete these two div in chrome-dev panel and then angular dev tool works. But it is really troublesome. It would be really appreciated if you could fix this bug.
Thanks for the report! @AleksanderBodurri, would you have the bandwidth to have a look?
Thanks for the report @JoeyLi-1 🙏
I'm not able to replicate this issue on stackblitz or with a newly generated app.
Can you run ng version and provide us with all of your angular dependency versions?
Could you also do the following:
- click on the link next to
at assertDomNodein your error stack trace - set a breakpoint next to the
throwErrorfunction in your chrome devtools Sources tab - reload the page and reproduce the bug
- inspect the
nodearg to see why it doesn't meet the conditions in the if statement.
See example below
@AleksanderBodurri Try like this:
- Create a new angular project locally with
ng new xxx - Add this
<script src="//fast.appcues.com/92599.js"></script>at the end of<head> - ng serve and then open the extension you will see the error I mentioned above.
Let me know if you still can not see the error.
Angular DevTools uses the ng.getDirectives function that is exposed by angular apps built in dev mode. During the function execution, a call to assertDomNode is made.
Notice node instanceof Node.
Appcues injects an iframe and uses the document from that iframe to create DOM elements.
The divs injected into the DOM from appcues are being created by calling contentDocument.createElement(...) using the document from the injected iframe. The Iframe and the main window where the app is running are different execution environments, so they have different built-ins.
The Node from the iframe environment is not the same Node in your main window. This is why assertDomNode throws an error.
Heres a small snippet to illustrate this.
Injecting elements from other execution environments into the main window's document can be problematic (this issue is an example of why). I suspect any work arounds would have to be implemented in the framework (where assertDomNode lives) instead of directly in devtools, but I wonder if its worth it to implement a work around for this case.
What do you think @mgechev?
@AleksanderBodurri yes, makes sense to publish a fix in framework, but let us keep it as a P4 issue for now.