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.
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.
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.
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.
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:
Steps to reproduce:
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 versionand provide us with all of your angular dependency versions?Could you also do the following:
at assertDomNodein your error stack tracethrowErrorfunction in your chrome devtools Sources tabnodearg to see why it doesn't meet the conditions in the if statement.See example below
@AleksanderBodurri Try like this:
ng new xxx<script src="//fast.appcues.com/92599.js"></script>at the end of<head>Angular DevTools uses the
ng.getDirectivesfunction that is exposed by angular apps built in dev mode. During the function execution, a call toassertDomNodeis 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
Nodefrom the iframe environment is not the sameNodein your main window. This is whyassertDomNodethrows 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
assertDomNodelives) 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.
@mgechev @AleksanderBodurri Thank you both!