Angular 8 Routing And Visualize The Routing Using Augury Extension Step By Step

In this article you will get an explanation of routing and visualization of routing using augury extension.

In my previous articles, we discussed,
Now, let's discuss the next feature of angular: setting up angular routing in our real-time application and visualize the application in developer tools extension called "Augury". As we know, in Angular we can create SPA (single page application) so for this Routing is the one and only tool or module to navigate from one page to another page.
 
There are mainly two types of routing as below,
  1. Component level routing
  2. Module-level routing 
In some scenarios, we need to pass data from one component to another component by routing then we can use query param and sometimes we need redirect using href, so in this case, we can use <routerLink> directive. 
 
Let's discuss component level routing,
 
Step 1
 
Go and create a first angular application using angular-CLI(for more details - click here)
 
Step 2
 
Go and create a component using the CLI command. i.e (ng g c home),
  • Home component
  • About component
  • Contact component
Step 3
 
After creating a project using Angular CLI command, the root routing file created automatically as app-routing.module.ts in app/src/app-routing.modules.ts. Now next go and edit that file and configure routing inside the same file below,
  • Go to app-routing.module.ts and import Routes and RouterModule.
  • Declare constant type as Routes as mentioned below,
  1. const routes: Routes = [{  
  2.     path: "",  
  3.     component: HomeComponent  
  4. }, {  
  5.     path: "Contact",  
  6.     component: ContactComponent  
  7. }, {  
  8.     path: "about",  
  9.     component: HomeComponent  
  10. }, {  
  11.     path: "**",  
  12.     component: PageNotFoundComponent  
  13. }]; 
There are two main properties,
  • Path
    In Path, we need to pass a string as route whatever you want. Suppose I am creating the path as 'home' then we can see our path i.e., localhost:4200/home

  • Component
    In Component, we need to pass the name of the component. Suppose you want to render home component i.e. component: HomeComponenImport HomeComponent in the same file.
Example
 
Syntax to set routing only for component
 
path - 'home',
component - HomeComponent
 
Step 4
 
Next, we need to pass the above routes in the forRoot() method which is defined in the RouteModule. Below is the way we can use routes:-
  1. @NgModule({  
  2.    imports: [RouterModule.forRoot(routes)],  
  3.    exports: [RouterModule]  
  4. })  
Let's discuss Module level routing / Lazy Loading Routes in Angular,
 
Firstly, we need to understand what is lazy loading and when we should use it?
 
Lazy loading is a design pattern and it help us to download the web pages in chunks instead of downloading everything in a big bundle. It's very helpful when we have a very complex and large application then we should use lazy loading to avoid load on the browser and it always increases the application performance.
 
Just look into the snapshot below,
 
Angular 8 Routing And Visualize The Routing Using Augury Extension Step By Step
 
As you can see in the above image, everything is not loaded here.
 

How to achieve lazy loading in Angular

 
Step 1
 
Create one module inside the app folder using CLI command: ng g m <module-name> --routing
 
Example
 
ng g m angular-tutorial --routing
 
Step 2
 
Go to your module routing which has created using above command.
 
Example
 
I have created routing module name angular-tutorial-routing.module.ts and paste below code for achieving module-level routing:-
  1. import { NgModule } from '@angular/core';  
  2. import { Routes, RouterModule } from '@angular/router';  
  3.   
  4. import { PrimengDetailsComponent } from './primeng-details/primeng-details.component';  
  5. import { NebularDetailsComponent } from './nebular-details/nebular-details.component';  
  6. import { AuguryDetailsComponent } from './augury-details/augury-details.component';  
  7. import { AngularLibraryComponent } from './angular-library/angular-library.component';  
  8. import { ThirdPartyLibraryComponent } from './third-party-library/third-party-library.component';  
  9.   
  10.   
  11. const routes: Routes = [{  
  12.    path: '',  
  13.    component: AngularLibraryComponent  
  14. },  
  15. {  
  16.    path: 'primeng-details',  
  17.    component: PrimengDetailsComponent  
  18. },  
  19. {  
  20.    path: 'nebular-details',  
  21.    component: NebularDetailsComponent  
  22. },  
  23. {  
  24.    path: 'augury-details',  
  25.    component: AuguryDetailsComponent  
  26. },  
  27. {  
  28.    path: "third-party-library",  
  29.    component: ThirdPartyLibraryComponent  
  30. }];  
  31.   
  32. @NgModule({  
  33.    imports: [RouterModule.forChild(routes)],  
  34.    exports: [RouterModule]  
  35. })  
  36. export class AngularTutorialRoutingModule { }   
Step 3
 
Go to "app-routing.module.ts" and write the below code,
  1. import { NgModule } from '@angular/core';  
  2. import { Routes, RouterModule } from '@angular/router';  
  3. const routes: Routes = [{  
  4.   path: '',  
  5.   loadChildren: () => import('./angular-tutorial/angular-tutorial.module').then(m => m.AngularTutorialModule)  
  6. }];  
  7. @NgModule({  
  8.   imports: [RouterModule.forRoot(routes)],  
  9.   exports: [RouterModule]  
  10. })  
  11. export class AppRoutingModule { }  
NOTE
As you can see in the above code, we need to use path and load children properties to achieve lazy loading and 
import('.........') -import feature introduced in angular 8, before we need to pass relative path of that module. 
 
Let's discuss what is "Augury" and how it will help to visualize and debug our application,
 
An augury is an inspection tool for angular that is available as an extension in chrome.
 
There are few steps to setup augury in your browser,
  • Go to chrome browser and click on options -> more tools -> Extensions -> open chrome web store -> search "Augury" and add it.
  • Now open your application and go to DevTools -> Augury

How "Augury" will work in Angular

  • In Augury, you can see the two essential tab - Component Tree, Router Tree.

  • Component Tree
    All components will display here. Go and select a particular component, you will get the state of component and as well as see the dependency of the component using the injector graph. See snapshot below
Angular 8 Routing And Visualize The Routing Using Augury Extension Step By Step
  • Router Tree
    Visualize which type of routing we are using in our application as see a snapshot,

    Angular 8 Routing And Visualize The Routing Using Augury Extension Step By Step
If you want to explore more about Augury then visit here.
 
The source code for this template is on Github, please feel free to come up with proposals to improve it.
 
I hope this article is helpful to you. Thanks for reading!
 
Happy learning. :)