How to use Augury Chrome Extension to check Lazy Loading in Angular 8

Introduction:

In this article i am going to explain how we check lazy loading diagrammatically in Angular application using Augury google chrome extension.

 

What is Augury?

Augury is the most used Developer Tool extension for debugging and profiling Angular applications inside the Google Chrome and Mozilla Firefox browsers.

 

Why Use Augury?

Augury helps Angular developers visualize the application through component trees, and visual debugging tools. Developers get immediate insight into their application structure, change detection and performance characteristics.

Augury is an application inspection tool for Angular that runs in the Web browser. It runs as a Chrome browser extension for the Developer Tools (DevTools) panel, aiding in analysis and debugging during development.

Installing Augury

The best way to install Augury is from the chrome web store. Select Extensions from the side panel, type "Augury" into the search field, and then press Enter.

https://chrome.google.com/webstore/category/extensions

 

 

 

 

For Windows and Linux, use Ctrl + Shift + I

For Mac OS X, use Cmd + Opt + I

 

Step:To Install Angular

Prerequisite

Basic knowledge of Angular

Visual Studio Code must be installed

Angular CLI must be installed

Node JS must be installed

Step 1:

Lets create a angular project using following npm command

1. ng new AuguryDemo  

First open this  project in VS Code and install bootstrap by using the following command: 

1. npm install bootstrap --save    

 Now open styles.css file and add Bootstrap file reference. To add a reference in styles.css file, add this line:

1. @import '~bootstrap/dist/css/bootstrap.min.css';  

 

Now create two modules named

 

1.Companies

1. ng g m Companies --routing  

2.Product

1. ng g m product --routing  

 

Now create some demo components in both of these modules by using given commands

For Companies

1. ng g c company1  
2. ng g c company2

Now open companies-routing.module.ts file and add the following code inside this file

1. import { NgModule } from '@angular/core';  
2. import { Routes, RouterModule } from '@angular/router';  
3.   
4. import { Compnay1Component } from './compnay1/compnay1.component';  
5. import { Compnay2Component } from './compnay2/compnay2.component';  
6. import { CompnayComponent } from './compnay.component';  
7. const routes: Routes = [  
8.   {  
9.     path:'Compnay1',component:Compnay1Component  
10.   },  
11.     
12.   {  
13.     path:'Compnay2',component:Compnay2Component  
14.   },  
15.       
16.   {  
17.     path:'Compnay',component:CompnayComponent  
18.   }  
19. ];  
20.   
21. @NgModule({  
22.   imports: [RouterModule.forChild(routes)],  
23.   exports: [RouterModule]  
24. })  
25. export class CompaniesRoutingModule { }  

Now create some demo components in both this modules by using given commands

For Product

 

1. ng g c product1  
2. ng g c product2  

Now open Product-routing.module.ts file and add the following code inside this file

 

1. import { NgModule } from '@angular/core';  
2. import { Routes, RouterModule } from '@angular/router';  
3. import { Product1Component } from './product1/product1.component';  
4. import { Product2Component } from './product2/product2.component';  
5. import { ProductComponent } from './product.component';  
6. const routes: Routes = [  
7.   {path:'Product1',component:Product1Component},  
8.   {path:'Product2',component:Product2Component},  
9.   {path:'prod',component:ProductComponent},  
10. ];  
11.   
12. @NgModule({  
13.   imports: [RouterModule.forChild(routes)],  
14.   exports: [RouterModule]  
15. })  
16. export class ProductRoutingModule { }  

 

 Now add a new component 'Home' and open home.component.html file and add following code in this file

1. <div class="container">  
2.   
3. <button style="margin: 10px;" class="btn btn-info" (click)="product()" >Product</button>  
4.   
5. <button style="margin: 10px;" class="btn btn-info" (click)="company()">Company</button>  
6.   
7. </div>  

  Now add  the following code in home.component.ts file

1. import { Component, OnInit } from '@angular/core';  
2. import { Router } from '@angular/router';  
3. @Component({  
4.   selector: 'app-home',  
5.   templateUrl: './home.component.html',  
6.   styleUrls: ['./home.component.css']  
7. })  
8. export class HomeComponent implements OnInit {  
9.   
10.   constructor(private router:Router) { }  
11.   
12.   ngOnInit() {  
13.   }  
14.   product()  
15.   {  
16.     this.router.navigate([`/product/prod`]);  
17.   }  
18.   company()  
19.   {  
20.     this.router.navigate([`/company/Compnay`]);  
21.   }  
22. }  

 After that open app-routing.module.ts file and add following code

1. import { NgModule } from '@angular/core';  
2. import { Routes, RouterModule } from '@angular/router';  
3.   
4.   
5. const routes: Routes = [  
6.   {  
7.     path: 'product',  
8.     loadChildren: './product/product.module#ProductModule'  
9. },  
10. {  
11.   path: 'company',  
12.   loadChildren: './companies/companies.module#CompaniesModule'  
13. },  
14. ];  
15.   
16. @NgModule({  
17.   imports: [RouterModule.forRoot(routes)],  
18.   exports: [RouterModule]  
19. })  
20. export class AppRoutingModule { }  

 Now open app.module.ts file and add the following code

1. import { BrowserModule } from '@angular/platform-browser';  
2. import { NgModule } from '@angular/core';  
3.   
4. import { AppRoutingModule } from './app-routing.module';  
5. import { AppComponent } from './app.component';  
6. import { HomeComponent } from './home/home.component';  
7.   
8. @NgModule({  
9.   declarations: [  
10.     AppComponent,  
11.     HomeComponent  
12.   ],  
13.   imports: [  
14.     BrowserModule,  
15.     AppRoutingModule  
16.   ],  
17.   providers: [],  
18.   bootstrap: [AppComponent]  
19. })  
20. export class AppModule { }  

 Open app.component.html file and add the following code

1. <app-home></app-home>  
2.   
3. <router-outlet></router-outlet>  

After completion of code run the project by using "ng serve" command in VS Code

 

Then run this project and open in Google chrome browser and test lazy loading.

  

 

Then click on Ctrl+F12 to enable debugger and click augury tab.

 

 

Click on to Router tree here it will show the route flow of our modules .If lazy loading is applied in components the it will show in square brackets 

that ,that particular component is loaded lazy or not. 

 

The Router Tree tab is located next to the Component Tree tab along the top left side. 

 

 

 

Now click on their child components to load there child route after clicking on all child components then this will show like below image 

 

 

 

The first view that is visible is the Component Tree which shows loaded components belonging to the application.

The component tree displays a hierarchical relationship of the components. When a component is selected, Augury presents additional information about the selected component in the Properties tab The final major feature of Augury is the Router Tree, which displays the routing information for the application.

Summary: In this article i discussed how we used Augury Extension to check the flow of lazy loading in Angular 8.

Please give your valuable feedback/comments/questions about this article. Please let me know if you liked and understood this article and how I could improve it.