Angular 18 SPA集成keycloak-angular时login()报错：this._instance未定义

问题详情 #

在Angular 18单页应用中集成keycloak-angular时，调用keycloak.login()抛出以下错误：

ERROR TypeError: Cannot read properties of undefined (reading 'login')
    at _KeycloakService.<anonymous> (keycloak-angular.mjs:138:26)
    at Generator.next (<anonymous>)
    at chunk-AKPF6CJK.js?v=5d5121ff:72:61
    at new ZoneAwarePromise (zone.js:2662:25)
    at __async (chunk-AKPF6CJK.js?v=5d5121ff:56:10)
    at _KeycloakService.login (keycloak-angular.mjs:137:29)
    at _ChatRoomComponent.<anonymous> (chat-room.component.ts:53:28)
    at Generator.next (<anonymous>)
    at fulfilled (main.js:5:24)
    at _ZoneDelegate.invoke (zone.js:365:28)

调试发现：

• keycloak.init()执行成功时，this._instance已正常定义
• 调用login()方法时，this._instance变为undefined，直接触发报错

相关代码 #

app.config.ts #

import {
  APP_INITIALIZER,
  ApplicationConfig,
  Provider,
  provideZoneChangeDetection,
} from '@angular/core';
import { provideRouter } from '@angular/router';
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

import { routes } from './app.routes';
import {
  KeycloakAngularModule,
  KeycloakBearerInterceptor,
  KeycloakService,
} from 'keycloak-angular';


function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        url: 'http://localhost:8081/',
        realm: 'chatappdev',
        clientId: 'chatapppublic',
      },
      initOptions: {
        // onLoad: 'login-required', // Action to take on load
        pkceMethod: 'S256',
        redirectUri: 'http://localhost:4200/chat', // TODO: home
        // silentCheckSsoRedirectUri:
        //   window.location.origin + '/assets/silent-check-sso.html', // URI for silent SSO checks
      },
      enableBearerInterceptor: true,
      bearerPrefix: 'Bearer',
    });
}

// Provider for Keycloak Bearer Interceptor
const KeycloakBearerInterceptorProvider: Provider = {
  provide: HTTP_INTERCEPTORS,
  useClass: KeycloakBearerInterceptor,
  multi: true,
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptorsFromDi()),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    KeycloakAngularModule,
    KeycloakBearerInterceptorProvider,
    KeycloakService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService],
    },
  ],
};

ChatRoomComponent.ts #

export class ChatRoomComponent implements OnInit {
  constructor(
    public readonly userService: UserService,
    private readonly keycloakService: KeycloakService,
    private readonly router: Router
  ) {}

  public async ngOnInit() {
    const isLoggedIn = await this.keycloakService.isLoggedIn();

    if (isLoggedIn) {
      const userProfile = await this.keycloakService.loadUserProfile();
      const user = {
        authStatus: 'AUTH',
        name: userProfile.firstName || '',
        email: userProfile.email || '',
      };
      window.sessionStorage.setItem('userdetails', JSON.stringify(user));
    } else {
      this.keycloakService.login();
    }
  }
}

排查方向与解决思路 #

1. 确保KeycloakService单例实例 #

问题大概率是init()和login()调用的不是同一个KeycloakService实例。Angular 18独立模式下，直接在providers数组中写KeycloakService可能导致多次实例化。

解决：
将app.config.ts中providers里的KeycloakService替换为明确的单例声明：

{ provide: KeycloakService, useClass: KeycloakService }

这样能保证整个应用中只有一个KeycloakService实例，init()初始化的_instance不会被其他实例覆盖。

2. 确保APP_INITIALIZER完成后再调用login() #

虽然ngOnInit是异步的，但APP_INITIALIZER的初始化可能还未完成，就触发了组件中的login()调用，此时_instance可能还未被正确赋值或被重置。

解决：
在组件中先确保init()完成后再执行登录逻辑，即使APP_INITIALIZER已经配置，重复调用init()不会有问题（keycloak-angular会处理重复初始化）：

public async ngOnInit() {
  // 先确保Keycloak初始化完成
  await this.keycloakService.init({
    config: {
      url: 'http://localhost:8081/',
      realm: 'chatappdev',
      clientId: 'chatapppublic',
    },
    initOptions: {
      pkceMethod: 'S256',
      redirectUri: 'http://localhost:4200/chat',
    },
    enableBearerInterceptor: true,
    bearerPrefix: 'Bearer',
  });

  const isLoggedIn = await this.keycloakService.isLoggedIn();
  if (isLoggedIn) {
    // 已登录逻辑
    const userProfile = await this.keycloakService.loadUserProfile();
    const user = {
      authStatus: 'AUTH',
      name: userProfile.firstName || '',
      email: userProfile.email || '',
    };
    window.sessionStorage.setItem('userdetails', JSON.stringify(user));
  } else {
    await this.keycloakService.login();
  }
}

3. 修复Zone.js上下文丢失问题 #

Angular 18的Zone.js可能导致异步操作中this指向异常，使得KeycloakService内部的this._instance丢失。

解决：
用NgZone包裹login()调用，确保在Angular的Zone上下文中执行：

import { NgZone } from '@angular/core';

// 构造函数注入NgZone
constructor(
  public readonly userService: UserService,
  private readonly keycloakService: KeycloakService,
  private readonly router: Router,
  private readonly ngZone: NgZone
) {}

// 在else块中修改
this.ngZone.run(() => {
  this.keycloakService.login();
});

4. 检查版本兼容性 #

Angular 18是较新版本，可能与当前使用的keycloak-angular版本不兼容，导致内部实例管理异常。

解决：
升级keycloak-angular到最新稳定版，确认其支持Angular 18。可以通过npm命令升级：

npm install keycloak-angular@latest keycloak-js@latest

内容的提问来源于stack exchange，提问作者Funsaized