rangle / augury

Angular Debugging and Visualization Tools
https://augury.rangle.io
MIT License
2.01k stars 216 forks source link

Augury not recognizing apps with custom elements #1385

Closed trickeyone closed 4 years ago

trickeyone commented 5 years ago

-- please install the Augury Canary Build Chrome extension, as this will be used to test any new features or bug fixes.

Augury version (required): 1.23.0 Angular version (required): 7.2.13 Date: 2019-04-26 OS: MacOS Mojave 10.14.4 (18E226)

-- Please make sure you're using the latest version of Augury before reporting an issue.

Demo test application: -- Git repository for demo app showing the issue (optional but very helpful for difficult issues). -- If a code snippet will completely show the issue, please include it.

Description of issue: -- Include (clipped) screenshot images if possible. Sometime I'm getting the "This application is not an Angular application. This application cannot be inspected using Augury." message, other times I get the normal view just without any components, etc. listed.

We recently switched to using ng cli for builds, we had previously been using webpack to build our app which was a hybrid Angular/React app. It used React in some places, and Angular in others. We switched to just Angular/vanilla JS, and so started using ng cli to build. However, after doing this, we've noticed that Augury no longer works on our local environments with ng build --watch and upgrading to Angular 7+.

Our app isn't an SPA, but just has partial takeovers in varying areas of the app. This is why we've gone with using @angular/elements to allow us to use custom elements and not have to switch to a full-page takeover.

I'm not 100% if the issue is that we're using custom elements and Augury can't hook into this, or if it's because we upgraded from Angular 6 to 7. I do know that, before both switches (custom elements & Angular 7) that Augury worked for most elements. The exception being modals from ngbootstrap/material, which I'm assuming it didn't recognize because it's outside the main scope.

I'm assuming the issue with modals might be the same issue we're seeing, as I believe custom elements are handled differently similarly to how modals are. i.e. outside the main component root tree.

Our app does load with a singular root module, the same way any Angular app does, so I'm kinda confused as to why we're seeing the "This application is not an Angular application." message.

Apologies for the lengthly description vs. providing an example. I will try to provide an actual example in the near future.

andrewthauer commented 5 years ago

@trickeyone - Thanks for the detailed description. This is most likely related to #1380 and entryComponents not working correctly. Will need to do a bigger pass on entry components & elements in general.

sumitarora commented 4 years ago

Closing it as it's being tracked in https://github.com/rangle/augury/issues/1380