Angular DevTools无法检测应用：Keycloak路由守卫引发的问题

问题现象 #

当Angular项目的根路由配置了Keycloak的canActivate认证守卫后，Chrome和Firefox浏览器中的Angular DevTools插件无法正常识别应用，持续提示**"Angular application not detected."**，Mac环境下该问题必现。

重现步骤 #

• 使用ng new创建全新Angular项目
• 在app.config.ts中添加Keycloak初始化及拦截器配置（代码见下文）
• 在app.routes.ts中配置根路由，添加Keycloak守卫：

{
    path: '',
    canActivate: [keycloakGuard],
    component: AppComponent
}

• 启动项目后尝试打开Angular DevTools，即可触发问题

关键配置代码 #

app.config.ts中的Keycloak配置 #

export function initializeKeycloak(
  keycloak: KeycloakService,
): () => Promise<boolean> {
  return () =>
      keycloak.init({
        config: {
          url: "<keycloak url>",
          realm: '<realm>',
          clientId: '<client id>',
        },
        initOptions: {
          checkLoginIframe: false,
        },
      });
}

const KeycloakBearerInterceptorProvider: Provider = {
  provide: HTTP_INTERCEPTORS,
  useClass: KeycloakBearerInterceptor,
  multi: true,
};

// Keycloak初始化Provider
const KeycloakInitializerProvider: Provider = {
  provide: APP_INITIALIZER,
  useFactory: initializeKeycloak,
  multi: true,
  deps: [KeycloakService],
};

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes),
    provideHttpClient(withInterceptorsFromDi()),
    KeycloakInitializerProvider, // 初始化Keycloak
    KeycloakBearerInterceptorProvider, // 注入Keycloak Bearer拦截器
    KeycloakService,
  ]
};

是否值得提交到Angular仓库？ #

完全值得提交，理由如下：

1. 问题可稳定复现：有清晰的重现步骤和最小化配置代码，官方能快速定位问题
2. 影响核心开发体验：Angular DevTools是官方调试工具，无法正常使用会直接降低开发者调试效率
3. 属于Angular生态兼容性问题：问题出在DevTools与Angular路由守卫、APP_INITIALIZER初始化流程的交互上，并非Keycloak单独问题（可移除守卫验证DevTools恢复正常）
4. 仓库现有问题数量不是提交阻碍——官方会根据问题影响范围和可复现性优先处理，这类影响开发工具可用性的问题通常会得到重视

提交时建议附带完整重现步骤、配置代码，并说明测试环境（Mac、浏览器版本、Angular及DevTools版本），帮助官方更快排查。

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