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.
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:
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.
If you use Angular 9 and up with Ivy enabled, you need to run the following command to inspect the selected Angular component:
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.
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.
Thanks for reading this short post about debugging Angular applications.
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.
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.