Why i get 'TypeError: error is undefined'?

Question

I try to integrate Keycloak to my Angular application, so I did a simple application with 2 components.

My package.json :

{
  "name": "keycloak-integration",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.14",
    "@angular/common": "~10.0.14",
    "@angular/compiler": "~10.0.14",
    "@angular/core": "~10.0.14",
    "@angular/forms": "~10.0.14",
    "@angular/platform-browser": "~10.0.14",
    "@angular/platform-browser-dynamic": "~10.0.14",
    "@angular/router": "~10.0.14",
    "keycloak-angular": "^8.0.1",
    "keycloak-js": "^11.0.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "webpack": "^4.43.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^10.0.1",
    "@angular-devkit/build-angular": "~0.1000.8",
    "@angular/cli": "~10.0.8",
    "@angular/compiler-cli": "~10.0.14",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

There is my routes of my application.

const routes: Routes = [
  { path: '', redirectTo: 'welcome', pathMatch: 'full' },
  {
    path: 'welcome',
    component: WelcomeComponent,
    data: {title: 'Welcome'}
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard],
    data: {title: 'Edit-Profil'}
  },
];

This is my simple ProfileComponent :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {


  constructor() {
    console.log('go profile...');
  }

 

}

This is the WelcomeComponent of my app :

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.scss']
})
export class WelcomeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
  }

  showProfile(): void {
    this.router.navigateByUrl('/profile');
  }

}

There is my AuthGuard, and the code does not go any further than my log stating that the authentication was successful.

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

@Injectable({
  providedIn: 'root',
})
export class AuthGuard extends KeycloakAuthGuard {
  constructor(
    protected readonly router: Router,
    protected readonly keycloak: KeycloakService
  ) {
    super(router, keycloak);
  }

  public async isAccessAllowed(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean> {
    // Force the user to log in if currently unauthenticated.
    console.log('Check if auth...');
    if (!this.authenticated) {
      try {
        const isLoggedIn = await this.keycloak.isLoggedIn();
        console.log('Auth: ' + isLoggedIn);
        if (!isLoggedIn) {
          await this.keycloak.login({
            redirectUri: window.location.origin + state.url,
          });
        }
      } catch (error) {
        console.error('Error while checking keycloak login status:', error);
      }
    }
    
    console.log('Auth passed ! Getting roles...'); // Can't reach it... 

    // Get the roles required from the route.
    const requiredRoles = route.data.roles;

    // Allow the user to to proceed if no additional roles are required to access the route.
    if (!(requiredRoles instanceof Array) || requiredRoles.length === 0) {
      return true;
    }

    // Allow the user to proceed if all the required roles are present.
    return requiredRoles.every((role) => this.roles.includes(role));
  }
}

I have this error in my web browser :

TypeError: error is undefined
    Angular 29
    processCallback keycloak.js:792
    processInit keycloak.js:320
    Angular 20
    check3pCookiesSupported keycloak.js:1328
    init keycloak.js:366
    Angular 17
    ts main.ts:11
    Webpack 6

I can give more details about my application or my Keycloak server if needed. Maybe more details are needed..

I'm not very comfortable with Angular either and I'm sorry in advance if the answer to my question was very simple.

I can authenticate myself (since I have a session to create on my Keycloak server) but the problem is after the authentication, during the redirection.

I have almost the same application in this video : https://www.youtube.com/watch?v=aykr98e7PlM