[Angular] Eroor on angular login using keycloak

[Belguitidh X]

hey everyone ,
my probeleme is i'm not able to logout using keycloak , the login is work 
but logout always display this error for me .
 ERROR TypeError: Cannot read properties of undefined (reading 'logout')
    at _KeycloakService.<anonymous> (keycloak-angular.mjs:147:26)
my code : 

export class AppComponent implements OnInit {
  userProfile: any;
  isLoggedIn = false;

  constructor(private keycloakService: KeycloakService) {}

  ngOnInit() {
    // Check if user is already logged in on initialization
    this.isLoggedIn = this.keycloakService.isLoggedIn();
    console.log("you are logged");
    if (this.isLoggedIn) {
      this.retrieveUserProfile(); 
    }
  }

  async retrieveUserProfile() {
    try {
      const profile = await this.keycloakService.loadUserProfile(); // Use 
loadUserProfile()
      this.userProfile = profile;
    } catch (error) {
      console.error('Error retrieving user profile:', error);
    }
  }

  async onLogin() {
    try {
      await this.keycloakService.login(); // Perform Keycloak login flow
      this.isLoggedIn = true;
      this.retrieveUserProfile();
      
    } catch (error) {
      console.error('Login error:', error);
    }
  }

  async onLogout() {
    console.log('Logout e1');
    try {
      console.log('Logout e12');
       this.keycloakService.logout();
      this.isLoggedIn = false;
     this.isLoggedIn=false;
      this.userProfile = null;
     
    } catch (error) {
      console.error('Logout error:', error);
    }
  }
}


html code : 
<div mat-icon-button [matMenuTriggerFor]="menu">
  <mat-icon *ngIf="userProfile">{{ userProfile.username }}</mat-icon>
  <button mat-icon-button *ngIf="!userProfile" >
    <mat-icon>login</mat-icon>
  </button>
</div>

<mat-menu #menu="matMenu">

  <button mat-icon-button *ngIf="userProfile" >
    <mat-icon>logout</mat-icon> {{ userProfile.username }}
  </button>
  
</mat-menu>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/angular/8d0b32ff-bafb-4f01-86f6-c1c4c47ef260n%40googlegroups.com.