How to Debug Angular Ivy Apps

How to Debug Angular Ivy Apps

In this post, I want to show you how you can use this global variable to debug Angular apps regardless if you are using Ivy or not.

Ivy is the code name for Angular’s next-generation compilation and rendering pipeline. Ivy is automatically used for new Angular projects and existing projects which were updated to Angular 9 with the Angular CLI.

I’ve had no issues with Ivy so far but you can temporarily disable it in your tsconfig.json file if you run into issues.

There are many ways to debug web applications. Some are inserting logging statements in their code, many use the browser development tools which include a powerful debugger, and some even use extra tools and web extensions (e.g. Augury for Angular applications).

However, if you are using the Angular framework then I can recommend another way to debug Angular applications.

Angular exposes a global variable called ng. This variable allows us to access the corresponding Angular component. We can not only see the component properties and functions, we can even modify them in the console and trigger change detection.

By doing this, you can avoid inserting unnecessary logging statements in your code because you can see the component state directly in your browser without any further tools.

Keep in mind that ng only works in development mode. When publishing your app to production, you should use AOT (Ahead-of-time) compilation and enable production mode which also removes debugging capabilities.

ng has been a part of Angular since its initial release. With Ivy, the API of ng has changed. In this post, I want to show you how you can use this global variable to debug Angular apps regardless if you are using Ivy or not.

In the following examples, I use $0, a global variable exposed by browsers like Google Chrome that returns the most recently selected DOM element. This has nothing to with Angular directly but it’s quite useful for debugging Angular applications in development mode.

How to Get the Component Instance Without Angular Ivy

If you have Angular older than version 9 or Angular with Ivy being disabled, you need to run the following command to inspect the selected Angular component:

ng.probe($0).componentInstance

This is image title

Inspecting an Angular component (not using Ivy)

As you can see, we can see the properties and functions of the selected component in the console.

How to Get the Component Instance With Angular Ivy

If you use Angular 9 and up with Ivy enabled, you need to run the following command to inspect the selected Angular component:

ng.getComponent($0)

This is image title

Inspecting an Angular component (using Ivy)

As you can see, the difference in usage is rather small. However, I find the new API to be easier to understand and to explain to other developers.

Other Helpful Functions Provided by ng in Ivy

Beside ng.getComponent(el), the new API has some nice functions which can be quite helpful at times:

  • [ng.getOwningComponent(el)](https://angular.io/api/core/global/ngGetOwningComponent) returns the parent component of the selected component.
  • [ng.getDirectives(el)](https://angular.io/api/core/global/ngGetDirectives) returns the associated directives of the selected element.
  • [ng.applyChanges(el)](https://angular.io/api/core/global/ngApplyChanges) triggers change detection of the selected component.

Conclusion

Thanks for reading this short post about debugging Angular applications.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Upgrade Angular CLI from Angular 8 to Angular 9

In this Angular 9 tutorial is focused on upgrade Angular CLI to 9 in Ubuntu. This example will help you upgrade Angular CLI version for Angular 8 to Angular 9 globally. This article will give you simple example of update Angular 8 to 9. We will look at example of upgrade angular 8 to 9. Let's see bellow example update Angular CLI version 8 to 9.

ReactJS vs Angular vs Vue: Best Javascript Framework For Your Project

ReactJS vs Angular vs Vue: Best Javascript Framework For Your Project. This video covers the key differences between ReactJS, Angular and Vue with respect to the following: Use case, Performance, Data binding, Scripting language, Testing, Community support, Growth curve

Learn Angular from Scratch and Go from Beginner to Advanced

In this Angular Tutorial, you'll learn Angular from scratch and go from beginner to advanced in Angular. In this Angular crash course you will learn from scratch. We will assume that you are a complete beginner and by the end of the course you will be at advanced level. This course contain Real-World examples and Hands On practicals.