Component Tree does not populate

[zakmac]

Date 01/30/2019

Software	Version
Augury	1.22.0
Angular	6.1.2
Windows	10
Chrome	71.0.3578.98
FireFox	64.0.2

Demo test application: n/a

Description of issue:

• Augury developer tool opens, but displays a blank component tree
• Screenshot shows Angular 6.1.2 application, the issue persists even after updating to Angular 7.2.2
• Other functionality such as the Router Tree/ngModules function as expected
• Augury functions as expected on other sites running an Angular application
  • For example, Tutorial of Heroes loads the Augury Component Tree tab without issue

Steps to reproduce: Can be reproduced 100% of the time in our Angular application by simply loading the application and opening Augury from DevTools. Unfortunately (for us) Augury works just fine on other Angular applications such as the Tutorial of Heroes demo app.

Additional details:

• Augury has worked fine in the past on this very same application. I am not sure if there are limits to the number of components shown which we have violated by having a larger application? There is no such indication in the UI
• Using the "search components" input under the Component Tree window to search for a known component on-page does not return results

[andrewthauer]

@zakmac - Are there any errors? If you right-click / inspect the devtool tab, you might seen console errors. Those could prove useful for troubleshooting.

[taylanken]

I'm also having issues with the component tree not populating.

Software	Version
Augury	1.23.0 (canary)
Angular	7.2.15
Windows	10
Chrome	78.0.3904.70

When I click on the Augury-tab in Chrome DevTools, I get 2 errors on my console:

Unhandled Promise rejection: Cannot set property root of [object Object] which has only a getter ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot set property root of [object Object] which has only a getter
    at o (backend.js:31)
    at o (backend.js:31)
    at o (backend.js:31)
    at o (backend.js:31)
    at i (backend.js:31)
    at Object.e.transform (backend.js:31)
    at backend.js:31
    at Array.forEach (<anonymous>)
    at O (backend.js:31)
    at Object.e.transform (backend.js:31) TypeError: Cannot set property root of [object Object] which has only a getter
    at o (chrome-extension://leechohfifidanmkioncamdcibhmmcji/build/backend.js:31:168332)
    at o (chrome-extension://leechohfifidanmkioncamdcibhmmcji/build/backend.js:31:168333)
    at o (chrome-extension://leechohfifidanmkioncamdcibhmmcji/build/backend.js:31:168333)
    at o (chrome-extension://leechohfifidanmkioncamdcibhmmcji/build/backend.js:31:168333)
    at i (chrome-extension://leechohfifidanmkioncamdcibhmmcji/build/backend.js:31:168798)
    at Object.e.transform (chrome-extension://leechohfifidanmkioncamdcibhmmcji/build/backend.js:31:170401)
    at chrome-extension://leechohfifidanmkioncamdcibhmmcji/build/backend.js:31:170584
    at Array.forEach (<anonymous>)
    at O (chrome-extension://leechohfifidanmkioncamdcibhmmcji/build/backend.js:31:170539)
    at Object.e.transform (chrome-extension://leechohfifidanmkioncamdcibhmmcji/build/backend.js:31:170802)

and

Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': An object could not be cloned.
    at Object.t.messageJumpContext (chrome-extension://leechohfifidanmkioncamdcibhmmcji/build/content-script.js:24:9921)
    at chrome-extension://leechohfifidanmkioncamdcibhmmcji/build/content-script.js:24:8583

I get this very same issue with the non-canary build.

[AlcidesA]

Same problem here

And when I click on "input" the console show this error

[NallaRK]

Facing the same issue. Component tree is empty and console shows below error:

[vtolstov]

same here

[prvrlnonelove]

Was the issue resolved? Because for me the issue makes the Augury literally useless.

[zakmac]

Because for me the issue makes the Augury literally useless.

Due to this issue and my inability to troubleshoot, I switched to a much more bare bones addon named "Angular State Inspector" a few months back. It uses the DOM inspector to navigate the Angular component tree and display POJO-style state objects --it may work for whichever case you were previously using Augury.

[prvrlnonelove]

@zakmac, hello. Thank you for the help. The State tab is empty for me in the Angular State Inspector. 😞

[zakmac]

Apologies to the maintainer for my taking this thread off track.

@prvrlnonelove the way the extension works is to select the element representing your component in the DOM inspector so it is highlighted. Once highlighted the State Inspector should show the state for the selected component (if the state changes, you need to select a different element and then re-select the component element to "refresh" the state tab.)

Hope that was helpful!

[mmulhearn]

FYI, this is still an issue as of today.

polyfills.f783dcda5e4da684bd75.js:1 Unhandled Promise rejection: Cannot read property 'ngInjectableDef' of null ; Zone: <root> ; Task: setTimeout ; Value: TypeError: Cannot read property 'ngInjectableDef' of null
    at C (main.0ed25213d83494f98a15.js:1)
    at Jo (main.0ed25213d83494f98a15.js:1)
    at e.get (main.0ed25213d83494f98a15.js:1)
    at Object.zi [as resolveDep] (main.0ed25213d83494f98a15.js:1)
    at e.get (main.0ed25213d83494f98a15.js:1)
    at Function.t.getComponentDescription (backend.js:46)
    at Object.e.transform (backend.js:61)
    at backend.js:61
    at Array.forEach (<anonymous>)
    at E (backend.js:61) TypeError: Cannot read property 'ngInjectableDef' of null
    at C (https://site/main.0ed25213d83494f98a15.js:1:100660)
    at Jo (https://site/main.0ed25213d83494f98a15.js:1:152542)
    at e.get (https://site/main.0ed25213d83494f98a15.js:1:163795)
    at Object.zi [as resolveDep] (https://site/main.0ed25213d83494f98a15.js:1:167938)
    at e.get (https://site/main.0ed25213d83494f98a15.js:1:160797)
    at Function.t.getComponentDescription (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:46:104901)
    at Object.e.transform (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:61:22138)
    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:61:22456
    at Array.forEach (<anonymous>)
    at E (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:61:22410)

[daton89]

for me the extension throws this error ng.probe is not a function