Angular APP_INITIALIZER 运行时循环依赖

Question

我有一个循环依赖(在运行时!)问题，我不知道如何解决。

我已经注册了一个 APP_INITIALIZER 加载函数，它加载一个 config.json 文件。此配置文件包含 NGXLogger 的 LogLevel 等。 配置文件是通过Angular的HttpClient加载的。

除此之外，我还注册了一个 HttpInterceptor，它使用 NGXLogger。

似乎 Angular 试图按以下顺序解决所有问题:

1. APP_INITIALIZER，所以先运行这个函数
2. 初始化程序的加载函数会触发 http 调用，因此首先运行拦截器
3. 加载HttpInterceptor的依赖项=> NGXLogger
4. 根据 APP_INITIALIZER 中的配置文件配置 NGXLogger => 的提供程序
5. 抛出错误，配置未定义

如何解决这种循环依赖？有没有办法完全跳过 APP_INITIALIZER http 调用上的拦截器？

CoreModule.ts:

export function appConfigFactory(configService: AppConfigService) {
  return () => configService.load();
}

export function loggerConfigFactory(configService: AppConfigService): {
  return () => {
    level: (NgxLoggerLevel as any)[configService.config.logLevel] || NgxLoggerLevel.ERROR,
  };
}

@NgModule({
  ...
  providers: [{
    provide: APP_INITIALIZER,
    useFactory: appConfigFactory,
    deps: [AppConfigService],
    multi: true
  }, {
    provide: NgxLoggerConfig,
    useFactory: loggerConfigFactory,
    deps: [AppConfigService]
  }]
})
export class CoreModule {}

AppConfigService.ts:

export class AppConfigService {
  constructor(private http: HttpClient) {}

  load() {
    return this.http
      .get<AppConfig>(`/assets/configuration/${environment.configFile}`)
      .pipe(
        tap((config: any) => {
          this.config = config;
        })
      )
      .toPromise();
  }
}

FakeBackendInterceptor:

@Injectable()
export class FakeBackendInterceptor implements HttpInterceptor {
    constructor(private configService: AppConfigService, private logger: NGXLogger) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // config is undefined here the first time
        if (!this.configService.config || !this.configService.config.mock === 'true') {
            return next.handle(request);
        }
        this.logger.info('Intercepting request with mock');
        // do things
        ...
        return next.handle(request);
    }
}

Answer 1

您可以使用HttpBackend跳过配置服务中的拦截器

constructor(
    private http: HttpClient,
    private httpBackend: HttpBackend) { }

并在load方法中

const httpClient = new HttpClient(this.httpBackend);
httpClient.get<AppConfig>(`/assets/configuration/${environment.configFile}`)
.pipe(
    tap((config: any) => {
      this.config = config;
    })
  )
  .toPromise();