{{announcement.body}}
{{announcement.title}}

How to Use Augury to Check Lazy Loading in Angular 8

DZone 's Guide to

How to Use Augury to Check Lazy Loading in Angular 8

In this article, we discuss how to test lazy loading in an Angular application with Augury, an extension for Chrome.

· Web Dev Zone ·
Free Resource

Introduction

In this article, I am going to explain how to check the flow of lazy loading in an Angular application using the Augury Google Chrome extension. When I was implementing lazy loading in my project, I faced some difficulty checking which module was lazy-loaded. I came to know about Augury extension, which shows the flow of lazy loading of all modules with a diagram. By seeing visually that our work is half done, if any modules are left behind in code, then we can easily check their routing in the route tree of Augury.

Installing Augury

You can install Augury from the Chrome Web Store.

 

Installing Augury

Installing Augury

For Windows and Linux, use Ctrl + Shift + I.

For Mac OS X, use Cmd + Opt + I.   

You may also like: Real-World Angular Series, Part 8a: Lazy Loading, Production Deployment, SSL.

Steps to Install Angular 

Prerequisites

  • Basic knowledge of Angular.
  • Visual Studio Code must be installed.
  • Angular CLI must be installed.
  • Node.js must be installed.

Step 1 

Let's create an Angular project using the following npm command:

Shell




x


 
1
ng new AuguryDemo  



First, open this project in VS Code and install Bootstrap by using the following command.

Shell




xxxxxxxxxx
1


 
1
npm install bootstrap --save  


  

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

JavaScript




xxxxxxxxxx
1


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



Now, create two modules named, Companies and Product:

Companies

Shell




xxxxxxxxxx
1


 
1
ng g m Companies --routing  



Product

Shell




xxxxxxxxxx
1


 
1
ng g m product --routing 


 

Now, create some demo components in the company module by using the following command:

JavaScript




xxxxxxxxxx
1


 
1
ng g c company1  


JavaScript




xxxxxxxxxx
1


1
ng g c company2



Now, open the companies-routing.module.ts file and add the following code:

JavaScript




xxxxxxxxxx
1
24


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



Now, create some demo components in the Product module by using the following commands:

For Product:

Shell




xxxxxxxxxx
1


 
1
ng g c product1  


Shell




xxxxxxxxxx
1


 
1
ng g c product2  



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

JavaScript




xxxxxxxxxx
1
16


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 the home.component.html file. Add the following code in this file:

HTML




xxxxxxxxxx
1


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



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

JavaScript




xxxxxxxxxx
1
22


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 the app-routing.module.ts file and add the following code:

JavaScript




xxxxxxxxxx
1
20


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:

JavaScript




xxxxxxxxxx
1
20


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 the app.component.html file and add the following code:

HTML




xxxxxxxxxx
1


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



Now, run the project by using the ng serve command in VS Code

Then, run this project with ng serve -o to compile the code,  open your Chrome browser, and test lazy loading. 

If you want to check how lazy loading works and how lazy loading routing flow, then Augury is the best tool we have.

Click on ctrl+F12 to enable the debugger and click on the Augury tab.

Clicking on Augury tab in inspector
Clicking on Augury tab in inspector

Click on the router tree. Here, it will show the route flow of our modules. If your project has implemented lazy loading then it will be represented in square brackets.

Augury component tree
Augury component tree

Now, click on their child components to load the child route after clicking on all child components. This will be shown like in the below image:

Checking child components
Checking child components

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

This is my small article about the Augury extension. You can check my previous article and give me some feedback which would be very useful for me to improve in the technological field. 

"Knowledge increases through sharing".  

Conclusion

In this article, I discussed how to use Augury Extention to check the flow of lazy loading in Angular 8.

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


Further Reading

Topics:
angular

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}