angular-devtools icon indicating copy to clipboard operation
angular-devtools copied to clipboard

Unbale to find ID of undefined

Open nikhilgrag opened this issue 3 years ago • 11 comments

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 avatar May 19 '21 02:05 nikhilgrag

@nikhilgrag Is IVY enabled on the application? Also Is it possible if you can provide a demo application replicating the issue?

sumitarora avatar May 19 '21 02:05 sumitarora

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 Screenshot 2021-05-19 at 9 16 06 AM

TheCoderFish avatar May 19 '21 03:05 TheCoderFish

Facing the same issue, with Angular 11.2.2 in dev and ivy enabled.

alvarovillafane avatar May 19 '21 04:05 alvarovillafane

@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.

nikhilgrag avatar May 19 '21 05:05 nikhilgrag

Can confirm that after removing private readonly vcr: ViewContainerRef dev tools works again.

alvarovillafane avatar May 19 '21 05:05 alvarovillafane

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.

mgechev avatar May 19 '21 12:05 mgechev

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 avatar May 19 '21 12:05 mgechev

@mgechev You are right, it works perfectly with v12, even when ViewContainerRef is injected in the component's constructor.

nikhilgrag avatar May 20 '21 06:05 nikhilgrag

@vmalvaro would you confirm it works with v12?

mgechev avatar May 21 '21 04:05 mgechev

@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.

alvarovillafane avatar May 21 '21 05:05 alvarovillafane

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.

jamisonbryant avatar Jul 02 '21 17:07 jamisonbryant