Since Angular 9 was released, Ivy, the new compiler and runtime instructions which has replaced View Engine as the default engine, is not compatible with Augury, which is an very helpful instrumental tools for developing/debugging with Angular projects.

Why Ivy?

Referring to Angular official blog, The Ivy compiler offers numerous advantages:

  • Smaller bundle sizes
  • Faster testing
  • Better debugging
  • Improved CSS class and style binding
  • Improved type checking
  • Improved build errors
  • Improved build times, enabling AoT on by default
  • Improved i18n

Image for post

Small apps could see around a 30% decrease in bundle size, large apps will see a 25–40% decrease, and medium apps decrease minimally.

What’s bad?

Augury, a browser extension helpful for developing and debugging your Angular project, but Augury currently does not have support for Angular Ivy, cause Angular Ivy remove the ng.probe() API deep dependenced by Augury.

We know that Augury still works fine with both Ivy and AoT features disabled, but that’s a pity. So, is there anyway to let them work together?

Image for post

Augury dosen’t work with Angular Ivy enabled, extension shows blank workspace and no.probe() printed in console.

#angular #augury #angular-ivy #frontend-development

Angular Ivy with Augury: A Simply Workaround
16.60 GEEK