angular 5 with keycloak-angular end in error

Question

I am trying to connect my angular 5 app to a keycloak server with the help of https://github.com/mauriciovigolo/keycloak-angular.

But I get the following error, when accessing the website.

ERROR An error happened during Keycloak initialization. core.js:1449
defaultErrorLogger core.js:1449
ErrorHandler.prototype.handleError core.js:1510
_callAndReportToErrorHandler/</< core.js:5693:54
ZoneDelegate.prototype.invoke zone.js:392
Zone.prototype.run zone.js:142
NgZone.prototype.runOutsideAngular core.js:4708:47
_callAndReportToErrorHandler/< core.js:5693
ZoneDelegate.prototype.invoke zone.js:392
onInvoke core.js:4760
ZoneDelegate.prototype.invoke zone.js:391
Zone.prototype.run zone.js:142
scheduleResolveOrReject/< zone.js:873
ZoneDelegate.prototype.invokeTask zone.js:425
onInvokeTask core.js:4751
ZoneDelegate.prototype.invokeTask zone.js:424
Zone.prototype.runTask zone.js:192
drainMicroTaskQueue zone.js:602
ZoneTask.invokeTask zone.js:503
invokeTask zone.js:1540
globalZoneAwareCallback zone.js:1566


Unhandled Promise rejection: An error happened during Keycloak initialization. ; Zone: <root> ; Task: Promise.then ; Value: An error happened during Keycloak initialization. undefined zone.js:690
api.onUnhandledError zone.js:690
handleUnhandledRejection zone.js:717
_loop_1 zone.js:707
api.microtaskDrainDone zone.js:711
drainMicroTaskQueue zone.js:610
ZoneTask.invokeTask zone.js:503
invokeTask zone.js:1540
globalZoneAwareCallback zone.js:1566

That is my environment.ts

import { KeycloakConfig } from 'keycloak-angular';
const keycloakConfig: KeycloakConfig = {
  url: 'https://devel.localhost:8443/auth',
  realm: 'MAP',
  clientId: 'webapp'
}
export const environment = {
  production: false,
  keycloak: keycloakConfig
};

That is my app.authguard.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { KeycloakService, KeycloakAuthGuard } from 'keycloak-angular';

@Injectable()
export class AppAuthGuard extends KeycloakAuthGuard {

constructor(protected router: Router, protected keycloakAngular: KeycloakService) {
    super(router, keycloakAngular);
}

isAccessAllowed(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return new Promise(async (resolve, reject) => {
        if (!this.authenticated) {
            this.keycloakAngular.login();
            return;
        }

        const requiredRoles = route.data.roles;
        if (!requiredRoles || requiredRoles.length === 0) {
            return resolve(true);
        } else {
            if (!this.roles || this.roles.length === 0 ) {
                resolve(false);
            }
            let granted: boolean = false;
            for (const requiredRole  of requiredRoles) {
                if (this.roles.indexOf(requiredRole) > -1) {
                    granted = true;
                    break;
                }
            }
            resolve(granted);
        }
    });
}
}

And finally my app.init.ts

import { KeycloakService } from 'keycloak-angular';

export function initializer(keycloak: KeycloakService): () => Promise<any> {

return (): Promise<any> => {
    return new Promise(async (resolve, reject) => {
        try {
            await keycloak.init();
            resolve();
        } catch (error) {
            reject(error);
        }
    });
};

}

I can not find what is wrong in my setup. I followed the explanations, provided on the github page of the library.

Answer 1

It seems that keycloak-js didn't find your configs. In your initializer function there is no config argument. It would perfectly work if you create a keycloak.json config file as shown in keycloak-js adapter docs at the root of your app.

If you don't want to create a keycloak.json file, you have to pass the values from the environment file to the init method of KeycloakService, as shown in keycloak-heroes example.

For example:

import { KeycloakService } from 'keycloak-angular';

import { environment } from '../../environments/environment';

export function initializer(keycloak: KeycloakService): () => Promise<any> {
  return (): Promise<any> => {
    return new Promise(async (resolve, reject) => {
      try {
        await keycloak.init({
          config: environment.keycloak,
          initOptions: {
            onLoad: 'login-required',
            checkLoginIframe: false
          },
          bearerExcludedUrls: []
        });
        resolve();
      } catch (error) {
        reject(error);
      }
    });
  };
}

If you have any other issues, the library also offers a slack channel.

Thanks!