Keycloak-angular (keycloak.js) returns "Cannot read property 'resourceAccess' of undefined"

I am using "keycloak-angular": "^7.1.0" and "keycloak-js": "^9.0.0". It seems that initialization goes ok. Whenever I am going to protected URL, angular redirects me to Keycloak, I am able to log in and I see cookies with tokens.

However, I get a problem whenever I call any of KeycloakService methods it returns an error: "Cannot read property '(method name here)' of undefined".

What I am doing wrong here? Here are my classes:

App module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, DoBootstrap, ApplicationRef } from '@angular/core';
import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';
import {ReactiveFormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { AuthGuard } from './services/kecloak/auth.guard';
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
import { environment } from 'src/environments/environment';
import { KeycloakInitService } from './services/kecloak/keycloak.init';

const keycloakService = new KeycloakService();

@NgModule({
declarations: [
...
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ReactiveFormsModule,
NoopAnimationsModule,
KeycloakAngularModule
],
providers: [
...
AuthenticationService,
{
provide:HTTP_INTERCEPTORS,
useClass:AuthenticationInterceptor,
multi:true
},
AuthGuard,
{
provide: KeycloakService,
useValue: keycloakService
}
],
bootstrap: [AppComponent],
entryComponents: [AppComponent]
})

export class AppModule implements DoBootstrap {
ngDoBootstrap(appRef: ApplicationRef) {
console.info(keycloakService + "initiated")
keycloakService
.init({
config: environment.keycloak,
initOptions: {
checkLoginIframe: false
},
bearerExcludedUrls: []
})
.then(() => {
console.log('[ngDoBootstrap] bootstrap app');

appRef.bootstrap(AppComponent);
})
.catch(error => console.error('[ngDoBootstrap] init Keycloak failed', error));
}
}


Navbar component:

import { Component, OnInit, OnChanges, SimpleChanges, Input, ChangeDetectionStrategy } from '@angular/core';
import { Router } from '@angular/router';
import { KeycloakService } from 'keycloak-angular';

@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
public loggedIn:boolean;
public signInText:string;
private roles:string[];
private router:Router;
private keycloak:KeycloakService;

@Input() isAdmin:boolean=false;
constructor( router:Router, keycloak: KeycloakService) {
this.router=router;
this.keycloak = keycloak;
}

async ngOnInit() {
console.info(this.keycloak)
this.keycloak.isLoggedIn().then(data=>{
this.loggedIn=data;
if(this.loggedIn){this.statusLogedIn();}
else{this.statusLogedOut();}
});

if(this.keycloak.isLoggedIn){
this.statusLogedIn();
}
else {
this.statusLogedOut();
}
}

public login() {
console.info(this.keycloak)
if(!this.loggedIn){
this.keycloak.login();
}
else{
this.keycloak.logout();
this.keycloak.clearToken();
this.statusLogedOut();
}
}


statusLogedIn(){
this.roles = this.keycloak.getUserRoles(true);
this.loggedIn=true;
this.signInText='Log out';
}
statusLogedOut(){
this.loggedIn=false;
this.signInText='Sign In';

}
}



Configuration:


import { KeycloakConfig } from 'keycloak-angular';

// Add here your keycloak setup infos
const keycloakConfig: KeycloakConfig = {
url: 'http://localhost:8080/auth/',
realm: 'master',
clientId: 'angular-client'
};

export const environment = {
production: false,
...
keycloak: keycloakConfig
};

Continue reading...