Angular devtools "Angular application not detected." with canActivate keycloak guard

The angular devtools plugin in firefox and chrome does not work and reports Angular application not detected. when the root path is guarded by a keycloak auth guard.

Reproduction steps:

• Create a new angular project with ng new
• Extend app.config.ts with keycloak configuration (see below)
• In app.routes.ts add the following route:

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


Now try to open angular devtools, on mac at least it does not work.

Is this worth adding to the 1.2k issues in the angular repo?

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,
};

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

export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes),
provideHttpClient(withInterceptorsFromDi()),
KeycloakInitializerProvider, // Initializes Keycloak
KeycloakBearerInterceptorProvider, // Provides Keycloak Bearer Interceptor
KeycloakService,
]
};

Continue reading...