Angular 17 router.navigate is not working

I have an angular application with two pages: The first one with a form and the second one with other data. I have a button and in onclick event i navigate to results page. Sometimes, the router.navigate does not work at the first time. I need to press the button two times to get the navigation. This is the function (the timeout is because i was testing if with that works, but the ideal version is without using it, but still not working some times on the first time). router is Router from Angular:

public goToResults() {
if (this.form.valid) {
setTimeout(() =>
this.router.navigate(["resultados/es"])
, 500);
}
else {
this.showErrors = true;
}
}


This the app.routes file:

export const routes: Routes = [
{ path: 'datos/:lang', component: UserDataComponent },
{ path: 'resultados/:lang', component: ResultsComponent, canActivate: [ReloadGuardService] },
{ path: '**', redirectTo: '/datos/es', pathMatch: 'full' }
];


I debugged the code and it enters in the timeout and executes the navigate line, but sometimes works and sometimes not, it is random. There is no error in the console also.

Do you know what is wrong or what is happening? Thanks in advance.

Continue reading...