Angular 提供商：为什么我的 useFactory 方法没有被调用？

Question

-问题- 我正在尝试加载一个包含一些环境的配置文件以连接到 Okta 应用程序。传递给 APP_INITIALIZER 的 useFactory: 的方法工作得很好，但是传递给 OKTA_CONFIG 的 useFactory: 的方法甚至从未被调用过。

我在方法中放置了一些 console.log() 消息，看看我能收集到什么，这是我在控制台中得到的：

loadConfig called!
core.js:6228 ERROR Error: Your Okta URL is missing...

来自 configService.oktaConfig() 的日志消息似乎没有发生。

-代码-

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { APP_INITIALIZER, NgModule } from '@angular/core';
    import { MaterialModule } from './modules/material/material.module';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { OKTA_CONFIG, OktaAuthModule } from '@okta/okta-angular';
    import { HttpClientModule } from '@angular/common/http';
    import { ConfigService } from './services/config.service';
    
    @NgModule({
      declarations: [
        ...
      ],
      imports: [
        BrowserModule,
        OktaAuthModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MaterialModule,
        FormsModule,
        HttpClientModule
      ],
      providers: [
        { provide: APP_INITIALIZER, useFactory: appInitializerFactory, deps:[ConfigService], multi: true},
        { provide: OKTA_CONFIG, useFactory: oktaInitializerFactory, deps:[ConfigService], multi: false}
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    
    export function appInitializerFactory(configService: ConfigService) {
      return () => configService.loadConfig();
    }
    
    export function oktaInitializerFactory(configService: ConfigService) {
      return () => configService.oktaConfig();
    }

config.service.ts

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpBackend } from '@angular/common/http';
    
    export interface IOktaConfig {
      pkce: boolean,
      issuer: string,
      redirectUri: string,
      clientId: string
    }
    
    export interface IAppConfig {
      production: boolean
      oidc: IOktaConfig
    }
    
    @Injectable({
      providedIn: 'root'
    })
    
    export class ConfigService {
      private httpClient: HttpClient;
      private config: IAppConfig;
    
      constructor(handler: HttpBackend) {
        this.httpClient = new HttpClient(handler);
      }
    
      public oktaConfig() {
        console.log("oktaConfig called!")!
        return this.config.oidc;
      }
    
      public async loadConfig(): Promise<any> {
        return this.httpClient.get('assets/config.json').pipe(settings => settings)
          .toPromise()
          .then(settings => {
            this.config = settings as IAppConfig;
            console.log("loadConfig called!");
          });
      }
    }

Answer 1

Return oktaInitializerFactory 上的实际数据而不是函数

export function oktaInitializerFactory(configService: ConfigService) {
   return configService.oktaConfig();
}

我根据我对你上面写的场景的理解，提供了一个Stackblitz Demo，并提供了解决方案，如果我错过了，请告诉我东西。

Angular 提供商：为什么我的 useFactory 方法没有被调用？

Angular provider: Why is my useFactory method not being called?

angular

dependency-injection

okta