Angular Keycloak using pkceMethod S256 Error and not able to display data

Im new here with Keycloak angular..

I am facing these error and not able to understand and debug.

ERROR undefined:

Zone - Promise.then (async) (anonymous) @ app.module.ts:98 Promise.then (async) 8835 @ main.ts:6 webpack_exec @ main.ts:7 (anonymous) @ main.ts:7 (anonymous) @ main.ts:7 (anonymous) @ main.js:2

I am able to get my access token on keycloak:

access_token
: 
"eyJhbnR5cCIgOiAiSldUIiwia2lkIiA6ICJWa2hpXzB5UWhIeFptRGxCcmhzcU45ams3STRKeGRJd2pTYzBDcjZYcUQwIn0.eyJleHAiOjE3MjIwNTk5NTQsImlhdCI6MTcyMjA1OTY1NCwiYXV0aF90aW1lIjoxNzIyMDU5NDE2LCJqdGkiOiJhMTFkZjY1NS1mOTAyLTRkMGYtOGJlNi1kMjBiN2ZjYjMwZjIiLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjcwODAvcmVhbG1zL21hY2NEZW50YWxjbGluaWNSZWFsbSIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiI0ZjhhNmNiYi0yNzQyLTQ1OWUtOGU5MS0zYzE3MDZmYTk5NjEiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJtYWNjRGVudGFsY2xpbmljQ2xpZW50Iiwic2lkIjoiZjg4YTY1MzAtZmM5My00MDJhLWJiYjAtYzJkZWU1YmZlNTY4IiwiYWNyIjoiMCIsImFsbG93ZWQtb3JpZ2lucyI6WyIqIl0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLW1hY2NkZW50YWxjbGluaWNyZWFsbSIsIm9mZmxpbmVfYWNjZXNzIiwidW1hX2F1dGhvcml6YXRpb24iLCJBRE1JTiIsIlVTRVIiXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6Im9wZW5pZCBwcm9maWxlIGVtYWlsIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsIm5hbWUiOiJLZW5uZXRoIE1hY2FyYWVnIiwicHJlZmVycmVkX3VzZXJuYW1lIjoia2VubWFjMTciLCJnaXZlbl9uYW1lIjoiS2VubmV0aCIsImZhbWlseV9uYW1lIjoiTWFjYXJhZWciLCJlbWFpbCI6Impib3VybmUua2VubWFjcHJvMTdAZ21haWwuY29tIn0.VOJajj_UQP0GKSLq_MWwxxmaZu-g8zavX170AbROKhErw55r1EcXC_FhYW3cxJjoP7TJn3fRN499ZvJPNeFX9gkYHuQbLvlxPvb69TX7aOAg-w0nFG7wkoWyuKYNbLNaZGajxiLKO4d-gomrRBdIfyrrAwdwnzuZB-r1oQl_t4UHnvvmmV46fzvdN2T45AWIF3W7DT7uiorAAhUYwhlA5E4oMXFcgYSIno2VInXouH2m87HNxPa6pRifoirTXoebNxa1GTpZknzLgqogvc1AIsXrALSkhIxwXHdK8jNk5duz-dUgTPgG10N2JXM3PC9EZDRTRvlQdTvLaRJw_6fnXg"
expires_in
: 
300
id_token
: 
"eyJiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJWa2hpXzB5UWhIeFptRGxCcmhzcU45ams3STRKeGRJd2pTYzBDcjZYcUQwIn0.eyJleHAiOjE3MjIwNTk5NTQsImlhdCI6MTcyMjA1OTY1NCwiYXV0aF90aW1lIjoxNzIyMDU5NDE2LCJqdGkiOiI5NzBmNDJhYS0yY2E4LTQ5NTktYmEyMy04ZTBmMDIwZGQ2ODkiLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjcwODAvcmVhbG1zL21hY2NEZW50YWxjbGluaWNSZWFsbSIsImF1ZCI6Im1hY2NEZW50YWxjbGluaWNDbGllbnQiLCJzdWIiOiI0ZjhhNmNiYi0yNzQyLTQ1OWUtOGU5MS0zYzE3MDZmYTk5NjEiLCJ0eXAiOiJJRCIsImF6cCI6Im1hY2NEZW50YWxjbGluaWNDbGllbnQiLCJub25jZSI6IjFhYWNmMjg5LTkwMGYtNGZjNC04Mzc0LWRhYTNjYTJkOGY1OCIsInNpZCI6ImY4OGE2NTMwLWZjOTMtNDAyYS1iYmIwLWMyZGVlNWJmZTU2OCIsImF0X2hhc2giOiJ4SmFQclVYMkY5Z1lrV3dvOTVXOFR3IiwiYWNyIjoiMCIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJuYW1lIjoiS2VubmV0aCBNYWNhcmFlZyIsInByZWZlcnJlZF91c2VybmFtZSI6Imtlbm1hYzE3IiwiZ2l2ZW5fbmFtZSI6Iktlbm5ldGgiLCJmYW1pbHlfbmFtZSI6Ik1hY2FyYWVnIiwiZW1haWwiOiJqYm91cm5lLmtlbm1hY3BybzE3QGdtYWlsLmNvbSJ9.uHMWGpsSwnaedZo22ItJ0Hjs1s4yQThHdcq-w2X811rhO5qsWtMf5X5Eq1h2pqQtuAJHwOXVKhLJnfplSEMqT5S9boBZMZ7h7FYDpcbaTbRgvnuM6H3TvWBi-4XOE2CGXnVRJVb1G-pHjbC-qMhbVLwbUrbE05KZlBlEUl7Os7C2Ob47BFBEGlCF6zuGH48j0nf5qgts0clj-u-36jGlt702I25HbsKDK_b2tpiV5vXIH2a0JCR5ikiLhYLmWNboUfqIjL8Xmc2WKHUhkkrnOtm003zYNetAe7ZgJscu65IuGKUrbSIVKXtn3ViXy1EveVmoGXM1BVBM9roy-ecKWg"
not-before-policy
: 
0
refresh_expires_in
: 
1800
refresh_token
: 
"xMiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIzYmZjMjlmNi1mOTRmLTQ2MDgtYTk0ZS0xOGFkZTRjMGIyYzUifQ.eyJleHAiOjE3MjIwNjE0NTQsImlhdCI6MTcyMjA1OTY1NCwianRpIjoiYTBiOWM5MTEtMjFlNS00MjQyLWE3NTItMDU1ZmIzMjdmMWZkIiwiaXNzIjoiaHR0cDovL2xvY2FsaG9zdDo3MDgwL3JlYWxtcy9tYWNjRGVudGFsY2xpbmljUmVhbG0iLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjcwODAvcmVhbG1zL21hY2NEZW50YWxjbGluaWNSZWFsbSIsInN1YiI6IjRmOGE2Y2JiLTI3NDItNDU5ZS04ZTkxLTNjMTcwNmZhOTk2MSIsInR5cCI6IlJlZnJlc2giLCJhenAiOiJtYWNjRGVudGFsY2xpbmljQ2xpZW50Iiwic2lkIjoiZjg4YTY1MzAtZmM5My00MDJhLWJiYjAtYzJkZWU1YmZlNTY4Iiwic2NvcGUiOiJvcGVuaWQgcm9sZXMgcHJvZmlsZSBlbWFpbCBiYXNpYyB3ZWItb3JpZ2lucyBhY3IifQ.onWuJtVaH8QBjWjsnuoZ0pFXVmDPJ_BXKqKbdDadA3LW4v5Q4Imnemw-deDPfGpXRh84U4eZF8mb7UoxI_uxjA"
scope
: 
"openid profile email"
session_state
: 
"f88a60-fc93-402a-bbb0-c2dee5bfe568"
token_type
: 
"Bearer"

Below is my configurations:

ng version

Angular CLI: 15.2.10
Node: 16.13.0
Package Manager: npm 8.1.0
OS: win32 x64

Angular: 15.2.10
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.11
@angular-devkit/build-angular   15.2.11
@angular-devkit/core            15.2.10
@angular-devkit/schematics      15.2.10
@angular/cdk                    15.2.9
@angular/material               15.2.9
@schematics/angular             15.2.10 (cli-only)       
rxjs                            7.4.0
typescript                      4.8.4</kbd>

app.module.ts:

import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';

function initializeKeycloak(keycloak: KeycloakService) {
    return () =>
        keycloak.init({
            config: {
                url: 'http://localhost:7080/',
                realm: 'realm-data',
                clientId: 'client-id-data'
            },
            initOptions: {
                pkceMethod: 'S256',
                redirectUri: 'http://localhost:4200',
            },
            loadUserProfileAtStartUp: false
        });
}

... .. .

providers: [
        provideAnimations(),
        DatePipe,
        {
            provide: APP_INITIALIZER,
            useFactory: initializeKeycloak,
            multi: true,
            deps: [KeycloakService]
        }
    ],

app-routing module ts

const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    {
        path: 'home',
        title: 'Home',
        component: HomeComponent,
        canActivate: [AuthKeyClockGuard],
        data: {
            roles: ['ADMIN']
        }
    },

.. .

auth route ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
import { KeycloakAuthGuard, KeycloakService } from 'keycloak-angular';
import { KeycloakProfile } from 'keycloak-js';
import { LoginUser } from '../model/class/authenticateModel/login-user';

@Injectable({
    providedIn: 'root'
})
export class AuthKeyClockGuard extends KeycloakAuthGuard {
    user = new LoginUser();
    public userProfile: KeycloakProfile | null = null;
    constructor(protected override readonly router: Router, protected readonly keycloak: KeycloakService) {
        super(router, keycloak);
    }

    public async isAccessAllowed(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        // Force the user to log in if currently unauthenticated.
        console.log(this.authenticated);
        if (!this.authenticated) {
            await this.keycloak.login({
                redirectUri: window.location.origin + state.url
            });
        } else {
            this.userProfile = await this.keycloak.loadUserProfile();
            console.log(this.userProfile);
            this.user.authStatus = 'AUTH';
            this.user.firstName = this.userProfile.firstName || '';
            this.user.email = this.userProfile.email || '';
            window.sessionStorage.setItem('userdetails', JSON.stringify(this.user));
        }

        // 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.some((role) => this.roles.includes(role));
    }
}

Hoping somebody could help me solve this error.

I tried changing init on keycloak but still the same. Tried also changing config on Keycloak admin. And also try to find on other issues with similar error but failed.