Injecting Keycloak from 'keycloak-js' throws NullInjectorError

[OmarSalama7]

I have an angular application where I'm initialising keycloak using the following:

// main.ts
providers: [
  ....
  provideAppInitializer(() => provideKeycloakAngular()),
],


// keycloak-init.ts

export const provideKeycloakAngular = async () => {
 // make request to the BE to retrieve realm, clientId and url
  const loginService = inject(LoginService);
  const {
    realm,
    clientId,
    url
  } = await lastValueFrom(loginService.someFn()); // returns promise

  return provideKeycloak({
    config: {
      clientId,
      realm,
      url,
    },
    initOptions: {
      onLoad: 'login-required',
    },
  });
};

everything seems to work fine. My issue is when I try to logout, I'm injecting Keycloak following this example from your docs but I'm getting:

ERROR NullInjectorError: R3InjectorError(Environment Injector)[Keycloak -> Keycloak]: 
  NullInjectorError: No provider for Keycloak!

any idea how I can fix that?

Thanks!

I am using the following versions
angular v19.1.2
keycloak-angular v19.0.2
keycloak-js v26.1.0

[mauriciovigolo]

Hey @JeyKeu,

This error usually occurs when a service or dependency is being injected in a context where it hasn't been provided or is no longer available. Since this is happening during logout, it’s worth checking how and where the logout process is being triggered.

I’d recommend reviewing the relevant code to better understand the issue and comparing it with the approach used in the example-standalone. That might help identify any differences or potential causes of the error.

[goldmont]

What's your moduleResolution in tsconfig.json? It should be set to bundler.

[OmarSalama7]

Hey @JeyKeu,

This error usually occurs when a service or dependency is being injected in a context where it hasn't been provided or is no longer available. Since this is happening during logout, it’s worth checking how and where the logout process is being triggered.

I’d recommend reviewing the relevant code to better understand the issue and comparing it with the approach used in the example-standalone. That might help identify any differences or potential causes of the error.

Hey @mauriciovigolo,

sorry for the late reply. I was on vacation for 2 weeks.

please note that I'm only importing Keycloak from 'keycloak-js' in my logout component that's why I'm getting the error there.

I guess the main issue here is that I am loading keycloak dynamically (fetching config from BE), which I believe is not supported yet by keycloak-angular?

What's your moduleResolution in tsconfig.json? It should be set to bundler.

@goldmont thanks for mentioning that, but I had it already there.

[dkopitsa]

keycloak-js supports loading configuration from a remote URL.

// Alternatively, you can provide a path to the `keycloak.json` file.
// This may have performance implications, as the file will be loaded from the server.
// This approach might also change in the future and is therefore not recommended.
new Keycloak("http://keycloak-server/keycloak.json");

Source: Keycloak JavaScript Adapter Documentation

However, the current ProvideKeycloakOptions type does not allow passing a string to the config parameter—it only accepts a KeycloakConfig object.