How to Debug Angular Ivy Apps

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

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)

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 #javascript #webdev #programming