Angular 19 SSR环境下如何用provideKeycloak解决window对象问题

问题分析 #

• SSR构建失败：服务器端不存在window对象，当前配置中initOptions.silentCheckSsoRedirectUri直接依赖window.location.origin，导致服务端渲染时抛出错误
• 需要区分客户端/服务器端配置：服务器端无需初始化Keycloak认证，需提供中性配置避免执行浏览器环境的逻辑

解决方案 #

通过Angular的平台判断能力，在provideKeycloak中动态生成适配不同环境的配置，核心思路是仅在浏览器环境下启用Keycloak初始化及相关依赖window的配置，服务器端跳过初始化逻辑。

修改后的appConfig代码 #

import { ApplicationConfig, inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { provideKeycloak } from 'keycloak-angular';
import { environment } from './environments/environment';

export const appConfig: ApplicationConfig = { 
  providers: [
    provideRouter(routes, withComponentInputBinding()), 
    provideClientHydration(), 
    provideHttpClient(withFetch()),
    // 动态生成Keycloak配置，区分客户端/服务器端
    provideKeycloak(() => {
      const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
      
      return {
        config: environment.keycloak,
        initOptions: isBrowser 
          ? {
              onLoad: 'check-sso',
              silentCheckSsoRedirectUri: `${window.location.origin}/silent-check-sso.html`
            }
          : {
              // 服务器端禁用自动初始化，避免访问window对象
              onLoad: undefined,
              silentCheckSsoRedirectUri: undefined
            },
        // 服务器端禁用Bearer拦截器，避免服务端请求触发认证逻辑
        enableBearerInterceptor: isBrowser,
        // 仅在浏览器端启动时加载用户信息
        loadUserProfileAtStartUp: isBrowser
      };
    })
  ]
};

关键说明 #

1. 平台判断：使用isPlatformBrowser(inject(PLATFORM_ID))区分当前运行环境是浏览器还是服务器端
2. 客户端配置：仅在浏览器环境下设置onLoad和silentCheckSsoRedirectUri，依赖window的逻辑仅在客户端执行
3. 服务器端配置：禁用自动初始化、Bearer拦截器及用户信息加载，避免服务端代码触发浏览器环境的API调用
4. 兼容性：该方案适配Angular 19及新版keycloak-angular的provideKeycloakAPI，无需修改核心认证逻辑

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