# OKTA\_CONFIG is injected before APP\_INITIALIZER

**URL:** <https://devforum.okta.com/t/okta-config-is-injected-before-app-initializer/20893>\
**Category:** Questions\
**Created:** [June 6, 2022, 5:24pm UTC](https://devforum.okta.com/t/okta-config-is-injected-before-app-initializer/20893 "2022-06-06T17:24:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![arnab.das](https://avatars.discourse-cdn.com/v4/letter/a/5daacb/32.png) [@arnab.das](https://devforum.okta.com/u/arnab.das)\
**Post date:** [June 6, 2022, 5:24pm UTC](https://devforum.okta.com/t/okta-config-is-injected-before-app-initializer/20893/1 "2022-06-06T17:24:41Z")

</div>

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.

```javascript
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”

---

<div class="post-metadata">

**Author:** ![alisaduncan](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/alisaduncan/32/3429_2.png) [@alisaduncan](https://devforum.okta.com/u/alisaduncan)\
**Post date:** [June 6, 2022, 6:47pm UTC](https://devforum.okta.com/t/okta-config-is-injected-before-app-initializer/20893/2 "2022-06-06T18:47:44Z")

</div>

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.

> **[Three Ways to Configure Modules in Your Angular App](https://developer.okta.com/blog/2022/02/24/angular-async-config)**
>
> Learn how to add configuration to modules in Angular three different ways - from static, changing configs at build time, and to loading configurations at run-time.

The specific section that you need is **[Loading configurations from external APIs](https://developer.okta.com/blog/2022/02/24/angular-async-config#loading-configurations-from-external-apis)**

Hope this helps!

---

<div class="post-metadata">

**Author:** ![arnab.das](https://avatars.discourse-cdn.com/v4/letter/a/5daacb/32.png) [@arnab.das](https://devforum.okta.com/u/arnab.das)\
**Post date:** [June 6, 2022, 7:04pm UTC](https://devforum.okta.com/t/okta-config-is-injected-before-app-initializer/20893/3 "2022-06-06T19:04:58Z")

</div>

Thank you for your prompt response. I tried out **[Loading configurations from external APIs](https://developer.okta.com/blog/2022/02/24/angular-async-config#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.

---

<div class="post-metadata">

**Author:** ![alisaduncan](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/alisaduncan/32/3429_2.png) [@alisaduncan](https://devforum.okta.com/u/alisaduncan)\
**Post date:** [July 13, 2023, 7:36pm UTC](https://devforum.okta.com/t/okta-config-is-injected-before-app-initializer/20893/4 "2023-07-13T19:36:47Z")

</div>

Update to this post as it hit a popularity threshold.

The Okta Angular SDK now supports runtime config built-in!

See [GitHub - okta/okta-angular: Angular SDK for Okta's OIDC flow](https://github.com/okta/okta-angular#app_initializer)

A tutorial post is in the works! 🎉

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/oktadev/original/1X/589c4c5f80de422d01f47cee7185a7fb8227835c.png) [@system](https://devforum.okta.com/u/system)\
**Post date:** [February 13, 2024, 4:49pm UTC](https://devforum.okta.com/t/okta-config-is-injected-before-app-initializer/20893/5 "2024-02-13T16:49:41Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.