Router Debugging in Angular

Steps of Router Debugging in angular application

1. Enable router tracing: In app.module.ts

   import { RouterModule, Routes } from "@angular/router";
   
   const routes: Routes = [
     // Define your routes here
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes, { enableTracing: true })],
     // ...
   })
   export class AppModule {}
   

   if working with standalone application

   const appRoutes: Routes = [];
   bootstrapApplication(AppComponent, {
     providers: [provideRouter(appRoutes, withDebugTracing())],
   });
   

2. Use console.log() to inspect

   import { Component } from "@angular/core";
   import { Router } from "@angular/router";
   
   @Component({
     // ...
   })
   export class MyComponent {
     constructor(private router: Router) {}
   
     navigateToRoute() {
       console.log("Before navigation");
       this.router.navigate(["/my-route"]);
       console.log("After navigation");
     }
   }
   

   else use below code

   isLoading$ = new BehaviorSubject<boolean>(false);
   
   constructor(private router: Router) {
   this.router.events
       .subscribe((event) => {
       if (event instanceof NavigationStart) {
           this.isLoading$.next(true);
       }
       else if (event instanceof NavigationEnd) {
           this.isLoading$.next(false);
       }
       });
   }