Angular 18 navigation between routes

I'm working with Angular and have implemented a NavigationService to handle routing/navigation in my app. However, i’m experiencing an issue where the navigation does not occur on the first click. I have to click twice for the desired route to load

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
providedIn: 'root'
})
export class NavigationService {

constructor(private router: Router) { }

/**
* Navigate to the login page
*/
navigateToLogin(): void {
this.router.navigate(['/auth/login']);
}

/**
* Navigate to the register page
*/
navigateToRegister(): void {
this.router.navigate(['/auth/register']);
}

/**
* Navigate to the home page
*/
navigateToHome(): void {
this.router.navigate(['/home']);
}

/**
* Navigate to the Trip Management admin dashboard
*/
navigateToTripManagment(): void {
this.router.navigate(['/admin/manage-trips']);
}

/**
* Navigate to the User Management admin dashboard
*/
navigateToUserManagment(): void {
this.router.navigate(['/admin/manage-users']);
}

/**
* Navigate to the Admin Dashboard
*/
navigateToAdminDashboard(): void {
this.router.navigate(['/admin']);
}
}


The navigation works, but it requires two clicks to go to the desired route. On the first click nothing happens but the second click successfully takes me to the correct route. This issue occurs with all of the navigation methods in the service.

I expect the navigation to happen on the first click.

Continue reading...