zone-evergreen.js:659 Unhandled Promise rejection: Unable to find context associated with [object SVGSVGElement]

[zxj669887072]

-- 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.25.2
Angular version (required): 9.0.1
Date: 2020-02-14 18:00
OS: win

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

++error in component rendering mode --> Hybird view;
"all components" and "components only" mode ok

Steps to reproduce:

1. ng new demo
2. ng serve
3. open in the chrome,click the angury

Additional details:
other app demo is ok;
Angular version (required):8.2.14;

[albygnagna]

I got the same issue with my application since I upgraded to Angular9.

Augury version (required): 1.25.2
Angular version (required): 9.0.1
Os: Osx

[shaozi]

Same here with:

• Augury version (required): 1.25.2
• Angular version (required): 9.0.4
• Os: Osx

[fernandonogueira]

Same here with:

• Angury version (required): 1.25.2
• Angular version (required): 9.0.6
• Os: OSX

[edgar131]

Same here with a very similar error:

• Augury version (required): 1.25.2
• Angular Version (required): 9.0.2
• OS: Win10

[ivebeenlinuxed]

Also Angular 9.0.7/Augury 1.25.2/OS Win10

[ivebeenlinuxed]

Further notes: this is when using https://www.npmjs.com/package/ngx-bootstrap-icons. It uses svg icons.

backend.js:15214 ng.getDirectives(t) throws this error, when being passed the SVG element

[krbaio3]

I installed the Augury Canary Build Chrome extension in Chrome and Chrome Canarian, and both, show the same error:

TypeError: ng.probe is not a function at Object.e.isDebugMode (ng-validate.js:1)

I read this issue and so, I understand Augury doesnt support Angular Ivy (Angular 9).

[7architect]

Same here with:

• Angury version (required): 1.25.2
• Angular version (required): 9.1.0
• Os: macOS

[bbbbx]

Angular 9.x occurs the same problem, Angular 8.x is ok

[cwadrupldijjit]

I think I found a workaround. Try going to the three dots for settings in the top right hand side of the screen and then select the "All components and elements" option instead of "Hybrid view":

[cwadrupldijjit]

My guess is that this is a bug that doesn't handle elements that don't have a Zone context (components or elements with directives on them have zones).

[franco148]

I have the same issue:
Angular 9.1.5
OS: Ubuntu 20.04

[GwilymNewton]

One more for the pile

Angular 1.1.6
Bootstrap 4
Augery 1.24.2
OS: OS-X

[vvolodin]

Same issue, Angular 9.1.3

[uberchris2]

+1

Angular 9.1.11
Bootstrap 4
Augery 1.25.2
OS: Win 10

[rodsilver83]

+1

Angular 9.1.11
Augury 1.25.2
OS: MAC 10.15.5
Bulma 0.9.0

[ghost]

I report also my case

Angular: 9.1.2
Augury: 1.25.2
OS: Windows 10 64 bit
Browser: Chrome 84.0.4147.105 64 bit
Bulma: 0.8.2
Other noticeable package from npm:

• bulma-extensions (6.2.7)
• PrimeNg (9.0.6)
• angular-oauth2-oidc (9.2.1)
• masonry-layout (4.2.2)

[webmaster-monresto]

Same issue

Angular v9.1.12
Augury: 1.25.2
OS: Windows 10 64 bit
Browser: Chrome 85.0.4183.83 (64 bits)

[elliotwesoff]

Same here

Angular v10.1.1
Augury: 1.25.2
OS: Windows 10 64 bit
Browser: Version 85.0.4183.102 (Official Build) (64-bit)

[webia1]

The solution has been already posted above: #1456 (comment)
by Samuel @cwadrupldijjit

[GwilymNewton]

The solution has been already posted above: #1456 (comment)
by Samuel @cwadrupldijjit

This is not a fix, it's a workaround.

[tsathis]

I'm also getting same. Also the workaround suggested above, does not work as expected for me.
Seems like Augury is not been actively developed, Is it so?

[plfgavilan]

Same here.

[bougwal]

If you still face this problem, you may notice that NgModules and Router Tree tabs are hidden as well. Disabling Ivy in tsconfig.json solved my issue. Probably, this will be sufficient for you.

Go to tsconfig.json -> Look for "angularCompilerOptions" -> set "enableIvy" to false

"angularCompilerOptions": { "enableIvy": false }

Explanation: Angular Version: 10.1.4 supports Ivy, yet Augury Version: 1.25.2 does not.

Hope this will help you!

Happy coding

[somq]

Same issue here:

Angular CLI: 10.1.7
Node: 12.14.0
OS: linux x64

Angular: 10.1.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.7
@angular-devkit/build-angular   0.1001.7
@angular-devkit/core            10.1.7
@angular-devkit/schematics      10.1.7
@angular/cli                    10.1.7
@schematics/angular             10.1.7
@schematics/update              0.1001.7
rxjs                            6.6.3
typescript                      4.0.3

Workaround does not allow to see the Router Tree tree & NgModules.

[bougwal]

@somq could you share your devtools screenshot with the message you got?

[bougwal]

@somq I can confirm that the solution I suggested above works fine for other folks. Check out the confirmation on stackoverflow.
here
Let me see your console message.

[somq]

@walidBouguima Sorry, I went a bit too fast on this one. You were right.

To clarify:

Augury setting	Ivy	Allow to
All components and elements	enabled	get rid of the error message
Hybrid view	disabled	see Router Tree and NgModules tabs

Example tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "module": "es2020",
    "lib": ["es2018", "dom"]
  },
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

Augury

[bougwal]

@somq Happy that your code is working fine and you can inspect your app with Augury! Feel free to give it a thumbs up emoji so others can see that it works when they scroll down 👍 !

[hanalice]

Same here

Angular Version: 10.0.6
Augury Version: 1.25.2
OS: Windows 10 64 bit
Browser: Version 85.0.4183.102 (Official Build) (64-bit)

@somq when I disable lvy, my dialog component throw errors, such as: 'Angular 10.0.6: no component factory found,did you add it to @NgModule.entryComponents? ', and when I enable lvy, it looks fine.

[tsathis]

Honestly, I'm so sad to say that augury has not helped me anytime whenever I needed it. I don't know why it just not works well as the Vue or React dev extensions.

[adimation]

I am using Angular v10.2.3 and Augury worked after disabling Ivy.

"angularCompilerOptions": {
    "enableIvy": false
  }

[Hossein13M]

same here with angular 11.0.5

[Hossein13M]

I am using Angular v10.2.3 and Augury worked after disabling Ivy.

"angularCompilerOptions": {
    "enableIvy": false
  }

tried this in Angular 11.0.5 and have trouble building the project.

[nickf2k]

I am using Angular v10.2.3 and Augury worked after disabling Ivy.

"angularCompilerOptions": {
    "enableIvy": false
  }

tried this in Angular 11.0.5 and have trouble building the project.

Same problem!