TypeError: Cannot redefine property: $$el at Function.defineProperty (<anonymous>) at Object.e.consoleReference (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:83265) at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:81185 at j (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:78471)

[saurabhdwivedi13]

Augury: 1.19.1
Date: Tue, 31 Jul 2018 03:29:51 GMT
OS: Win64

Description of issue:
-- When selecting a component it throws error 👍
TypeError: Cannot redefine property: $$el
at Function.defineProperty ()
at Object.e.consoleReference (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:83265)
at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:81185
at j (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:78471)

Angular version (required): 5

Steps to reproduce:

1. Open Angular app
2. Go to Developer too;
3. Go to Augury select any component.ts file throws error 👍

ypeError: Cannot redefine property: $$el
at Function.defineProperty ()
at Object.e.consoleReference (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:83265)
at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:81185
at j (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:78471)

[keneasson]

Hello, thanks for letting us know.
It looks like the$$el property in your window has been set elsewhere as non-configurable. Can you confirm this by running Object.getOwnPropertyDescriptor(window, '$$el') from your console?

[saurabhdwivedi13]

In chrome when I ran this it returned undefined.

[saurabhdwivedi13]

Please advise with the further course of action, in case I need to change anything.
Thanks !!

[saurabhdwivedi13]

Now after clicking to a component which are present in my app it is throwing error but when I ran -

Object.getOwnPropertyDescriptor(window, '$$el')

it says {value:"There is no component selected", configurable:false, enumerable:false, writable:false}
kindly suggest.
Thanks !

[saurabhdwivedi13]

one more observation it is specifically breaking for Angular 5 for Angular 6 it is working fine.

[RyanOC]

Same error here. Any ideas on a fix?

[peterblazejewicz]

It happens on clean install of Firefox (MacOS) with only Augury extension being installed.

[peterblazejewicz]

Can we fix this by:

diff --git a/src/backend/backend.ts b/src/backend/backend.ts
index a6817f3..8f2bebb 100644
--- a/src/backend/backend.ts
+++ b/src/backend/backend.ts
@@ -444,14 +444,16 @@ export const routerTree = (): Array<any> => {
 };
 
 export const consoleReference = (node: Node) => {
-  Object.defineProperty(window, selectedComponentPropertyKey, {
-    get: () => {
-      if (node) {
-        return ng.probe(node.nativeElement());
+  if (!Object.getOwnPropertyDescriptor(window, selectedComponentPropertyKey)) {
+    Object.defineProperty(window, selectedComponentPropertyKey, {
+      get: () => {
+        if (node) {
+          return ng.probe(node.nativeElement());
+        }
+        return null;
       }
-      return null;
-    }
-  });
+    });
+  }
 };

[saurabhdwivedi13]

Is it going to be fixed in any upcoming release ??

[saurabhdwivedi13]

Hello ,
Is it going to be fixed in any of future release.
Please advise.

[maevadevs]

Still having issue on this with latest Angular and Augury canary build.

Augury version (required): Augury Canary Build
Angular version (required): 8.2.6
Date: 2019-09-15T01:23:09.458Z
OS: MacOS 10.14.6

Description of issue:
Clicking on any component in the component tree will throw the following error. Reproduced in both Chrome and Firefox.

Steps to reproduce:

1. Start Angular Application: Port 4200
2. Open Browser Developer Tools > Augury
3. Click on any Angular component in Augury's Component Tree view

[RPethani]

I have just started to use this tool but unable to explore it further because of this issue. Is there any quick fix ?

My configurations are same as @maevadevs

[joaodarocha]

I can also add that it's also happening in Angular 8, i get the same error.

[I don't know what's happening but for some reason I cannot upload the images right now, sorry]

And this is the result of Object.getOwnPropertyDescriptor(window, '$$el').

> Object.getOwnPropertyDescriptor(window, '$$el')
> { value: "There is no component selected.", writable: false, enumerable: false, configurable: false }

[binDongKim]

I'm using Angular 8(accurately 8.2.3) and got the same error.

[TaPO4eg3D]

I fixed this issue in my PR. You can wait till it's merged or build the extension yourself.