How to import keycloak module using standalone components and without NgModule (v17)

Issue

I've just created a new angular application (v17). AppComponent is a standalone component and main.ts looks like

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

When the app boots I want (if not done yet) keycloak to kick to authenticate and redirect to the keycloak login page.

So I modified appConfig:

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

The problem here is that KeycloakService is never provided. If you google you see examples which use NgModule in which KeycloakAngularModule is added to the imports array, which I don't have (everything is standalone components.

So my question is, should I create an app.module.ts file an do

@NgModule({
    imports: [ KeycloakAngularModule, ...],
    ...
})
export class AppModule { }

or is there an other way to do this with angular 17?

Solution

Simply add the KeycloakService as provider.

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService]
    },
    KeycloakService // <-- add your missing provider here
  ]
};

Answered By - John