angular-devtools
angular-devtools copied to clipboard
Unbale to find ID of undefined
Angular version 10.2.4
It doesn't show any component in the component list under the Angular devtools tab in chrome. When I try to inspect any component with Angular Devtools on my angular app, I get the following error.
backend.js:1 Unable to find ID of undefined getDirectiveId @ backend.js:1 elementMouseOver @ backend.js:1 invokeTask @ polyfills.js:412 runTask @ polyfills.js:180 invokeTask @ polyfills.js:493 invokeTask @ polyfills.js:1634 globalZoneAwareCaptureCallback @ polyfills.js:1692
@nikhilgrag Is IVY enabled on the application? Also Is it possible if you can provide a demo application replicating the issue?
I am facing the same issue, I will try it on a blank app and see if the issue persists, for now, see if this screenshot of the stack trace is of any help
Facing the same issue, with Angular 11.2.2 in dev and ivy enabled.
@sumitarora yes I have Ivy enabled.
While debugging I found out the issue for why it is not working for me. Not sure if everyone has the same issue.
So, AngularDev tools don't work for
- Overlay components (Dynamically rendered components)
- components where 'ViewContainerRef' is injected in the constructor.
constructor( private vcr: ViewContainerRef, )
After removing ViewContainerRef from my app component constructor, devtools started working.
Can confirm that after removing private readonly vcr: ViewContainerRef
dev tools works again.
This seems like a known issue with v11 and older versions. Would you try updating to v12 and run DevTools again? We introduced new debugging APIs that help us find the render tree more accurately.
FYI, I'm labeling as a P3 because it should be working properly with v12. Let me know if that's not the case.
@mgechev You are right, it works perfectly with v12, even when ViewContainerRef is injected in the component's constructor.
@vmalvaro would you confirm it works with v12?
@mgechev Can't confirm, as we are not ready to move our project to v12 yet. I'll let you know what happens once we move to Angular 12 in the next few weeks.
Is there any workaround for projects that cannot upgrade to Angular 12 and cannot remove ViewContainerRef
from their constructors? I'm working as part of a team and do not have decision making power over either of those aspects.