In my previous articles, we discussed,
  1. How to create an Angular Project
  2. Change prefix of angular component
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';
  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';
  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. }];
  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,

How "Augury" will work in Angular

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. :)