在Angular中，在发送HTTP请求之前加载配置文件可以使用APP_INITIALIZER提供的功能。

首先，创建一个配置服务，该服务将加载配置文件并在应用程序初始化期间提供配置数据。在这个示例中，我们将使用HttpClient来发送HTTP请求并获取配置文件的内容。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ConfigService {
  private configData: any;

  constructor(private http: HttpClient) { }

  loadConfig(): Promise {
    return this.http.get('assets/config.json').toPromise()
      .then((data) => {
        this.configData = data;
      });
  }

  getConfigData(): any {
    return this.configData;
  }
}

然后，在应用程序的主模块中，我们使用APP_INITIALIZER提供器来调用配置服务的loadConfig方法。这将确保在应用程序初始化期间加载配置文件。

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

import { AppComponent } from './app.component';
import { ConfigService } from './config.service';

export function loadConfig(config: ConfigService) {
  return () => config.loadConfig();
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: loadConfig,
      deps: [ConfigService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，我们可以在其他组件中注入配置服务，并使用getConfigData方法获取配置数据。

import { Component, OnInit } from '@angular/core';
import { ConfigService } from './config.service';

@Component({
  selector: 'app-root',
  template: `
    
{{ title }}
    
{{ configData }}
  `
})
export class AppComponent implements OnInit {
  title = 'Angular App';
  configData: any;

  constructor(private configService: ConfigService) { }

  ngOnInit() {
    this.configData = this.configService.getConfigData();
  }
}

这样，在应用程序启动时，配置服务将在发送HTTP请求之前加载配置文件，并且可以在其他组件中使用配置数据。