OKTA_CONFIG is injected before APP_INITIALIZER

I’m trying to load Okta Config from an external service in APP_INITIALIZER of angular application. However OKTA_CONFIG token is resolved earlier than APP_INITIALIZER and hence config is null.

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ConfigService } from './config.service';
import { HttpClientModule } from '@angular/common/http';
import { OktaAuthModule, OKTA_CONFIG } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, HttpClientModule, OktaAuthModule],
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: (http: HttpClient) => {
        return () => ConfigService.loadConfig(http);    //<-- does not execute first
      },
    deps: [HttpClient],
      multi: true,
    },
    {
      provide: OKTA_CONFIG,
      useValue: {
        oktaAuth: new OktaAuth(ConfigService.Config),  //<-- This executes first (issue!)
      }
    }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

ConfigService.Config is null in oktaAuth: new OktaAuth(ConfigService.Config) because APP_INITIALIZER has not yet executed. How do I solve the issue? How to resolve APP_INITIALIZER token first?

Angular 13,
@okta/okta-angular”: “5.2.0”,
@okta/okta-auth-js”: “6.4.5”

Hey there.

You are correct that APP_INITIALIZER doesn’t resolve before needing the values to configure Okta. The way to resolve this is to load the configuration when bootstrapping Angular by calling fetch to your configuration server.

Here is a blog post that discusses how to do this in more detail, as well as code samples.

The specific section that you need is Loading configurations from external APIs

Hope this helps!

1 Like

Thank you for your prompt response. I tried out Loading configurations from external APIs section as you suggested and it works now!

However, if I remember correctly, this used to work well with okta-angular 3.2.2. I faced this issue when I updated my okta-angular package to the latest version.