Angular app with Entra ID not redirected to give path after successful login

I have an angular webapp which is integrated with Entra ID for user login. My azure AD app has redirect URI as "http://localhost:4200/translate". Following are my routes -

const routes: Routes = [
{
path: 'translate',
pathMatch: 'full',
canActivate: [MsalGuard],
component: HomeComponent,
},
{ path: '', pathMatch: 'full', component: LoginComponent },
];


I want to show the LoginComponent on http://localhost:4200. When the user has successfully logged in I want to redirect the user to "http://localhost:4200/translate". The login is successfully happening and I get a valid token as well but after successful login the user lands on http://localhost:4200. After 2-3 click on my login button in LoginComponent the angular app automatically redirects to "http://localhost:4200/translate". I want to understand why is the app not redirecting to "http://localhost:4200/translate" at the first go itself?

My login method in the LoginComponent for reference:

loginRedirect() {
if (this.msalGuardConfig.authRequest) {
this.authService.loginRedirect({
...this.msalGuardConfig.authRequest,
} as RedirectRequest);
} else {
this.authService.loginRedirect();
}
}

Continue reading...