Router Debugging in Angular

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())
    ]
}
);

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); 
    }
    });
}