title: angular 5 with keycloak-angular end in error
body: <p>I am trying to connect my angular 5 app to a keycloak server with the help of <a href="https://github.com/mauriciovigolo/keycloak-angular" rel="nofollow noreferrer">https://github.com/mauriciovigolo/keycloak-angular</a>. </p>
  
  <p>But I get the following error, when accessing the website.</p>
  
  <pre><code>ERROR An error happened during Keycloak initialization. core.js:1449
  defaultErrorLogger core.js:1449
  ErrorHandler.prototype.handleError core.js:1510
  _callAndReportToErrorHandler/&lt;/&lt; core.js:5693:54
  ZoneDelegate.prototype.invoke zone.js:392
  Zone.prototype.run zone.js:142
  NgZone.prototype.runOutsideAngular core.js:4708:47
  _callAndReportToErrorHandler/&lt; 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/&lt; 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: &lt;root&gt; ; 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
  </code></pre>
  
  <p>That is my environment.ts</p>
  
  <pre><code>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
  };
  </code></pre>
  
  <p>That is my app.authguard.ts</p>
  
  <pre><code>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&lt;boolean&gt; {
      return new Promise(async (resolve, reject) =&gt; {
          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) &gt; -1) {
                      granted = true;
                      break;
                  }
              }
              resolve(granted);
          }
      });
  }
  }
  </code></pre>
  
  <p>And finally my app.init.ts</p>
  
  <pre><code>import { KeycloakService } from 'keycloak-angular';
  
  export function initializer(keycloak: KeycloakService): () =&gt; Promise&lt;any&gt; {
  
  return (): Promise&lt;any&gt; =&gt; {
      return new Promise(async (resolve, reject) =&gt; {
          try {
              await keycloak.init();
              resolve();
          } catch (error) {
              reject(error);
          }
      });
  };
  
  }
  </code></pre>
  
  <p>I can not find what is wrong in my setup. I followed the explanations, provided on the github page of the library.</p>