Angular routing not loading component properly

I have a problem regarding angular routing not loading my component the first time.

Example: When i write "http://localhost:4200" i getting redirected to "http://localhost:4200/ENU" which is correct, but then my login component is not loaded correctly, im just getting a blank website with the url of "http://localhost:4200/ENU". And then when i refresh my browser,the login component is loaded correctly.

this is my routing setup in angular:

const routes: Routes = [
  {path: '', redirectTo: 'ENU', pathMatch: 'full'},
  {path: ':language', component: LoginComponent},
  {path: ':language/home', component: HomeComponent, canActivate: [AuthGuard]},
  {path: ':language/trucks', component: TrucksComponent, canActivate: [AuthGuard]},
  {path: '**', redirectTo: 'ENU', pathMatch: 'full'},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

This is Angular v16

Any suggestions?

I want to load my login component when i write "http://localhost:4200" and then getting redirected to "http://localhost:4200/ENU"

this is my auth-guard:

    export class AuthGuard {
  private _authService: AuthService = inject(AuthService);
  private _router: Router = inject(Router);

  async canActivate(): Promise<| Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree> {
    if (!this._authService.isLoggedIn) {
      await this._router.navigate(['/ENU']);
    }
    return true;
  }
}