Router Debugging in Angular

Manthan Ankolekar - May 18 '23 - - Dev Community
  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); 
        }
        });
    }
    
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .