Приведенная ниже проблема с github помогла мне понять, что пошло не так.

HTTP_INTERCEPTOR не ждет APP_INITIALLIZER

Поскольку ваш перехватчик использует HttpClient, это, в свою очередь, вызывает перехватчик, поэтому вы получаете эту проблему. Решение этой проблемы — использовать HttpBackend запросы которого не перехватываются перехватчиком, это решит вашу проблему. Ввод должен быть передан как HttpRequest

function appInitializer(http: HttpBackend, storageService: StorageService) {
  return () => {
    return http.handle(new HttpRequest('GET', CONFIG_URL)).pipe(
      map((config: any) => {
        storageService.apiUrl = config.apiUrl;
        console.info('Config loaded successfully');
      }),
      catchError((error: any) => {
        console.error('Error loading configuration:', error);
        throw error;
      })
    );
  };
}

export function provideAppInitializer(): Provider {
  return {
    provide: APP_INITIALIZER,
    useFactory: appInitializer,
    deps: [HttpBackend, StorageService],
    multi: true,
  };
}

Поместите config.json в папку с ресурсами, чтобы получить данные. Затем настройте это в папке ресурсов angular.json, чтобы его можно было обнаружить. Как видно из stackblitz.

   ...
   },
      "options": {
        "assets": ["src/assets"],
        "index": "src/index.html",
        "browser": "src/main.ts",
        ...

Вы можете избавиться от async await и сделать это с помощью чистого rxjs. мы можем использовать map для назначения значений в хранилище и catchError для перехвата любых исключений.

function appInitializer(http: HttpClient, storageService: StorageService) {
  return () => {
    return http.get<XiConfig>(CONFIG_URL).pipe(
      map((config: any) => {
        storageService.apiUrl = config.apiUrl;
        console.info('Config loaded successfully');
      }),
      catchError((error: any) => {
        console.error('Error loading configuration:', error);
        throw error;
      })
    );
  };
}

Еще одна вещь: вам нужно импортировать конфигурацию приложения в загрузочное приложение.

bootstrapApplication(App, appConfig);

Затем, наконец, получите доступ к этому компоненту.

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target = "_blank" href = "https://angular.dev/overview">
      Learn more about Angular
    </a>
  `,
})
export class App {
  name = 'Angular';

  constructor(@Inject(API_URL_TOKEN) private urlToken: string) {
    console.info(urlToken);
  }
}

Полный код:

Main.ts

import { Component, Inject } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { appConfig } from './app/app.config';
import { API_URL_TOKEN } from './app/app-url-token';

    @Component({
      selector: 'app-root',
      standalone: true,
      template: `
        <h1>Hello from {{ name }}!</h1>
        <a target = "_blank" href = "https://angular.dev/overview">
          Learn more about Angular
        </a>
      `,
    })
    export class App {
      name = 'Angular';

      constructor(@Inject(API_URL_TOKEN) private urlToken: string) {
        console.info(urlToken);
      }
    }

bootstrapApplication(App, appConfig);

app.config.ts

import { ApplicationConfig } from '@angular/core';
import {
  provideHttpClient,
  withFetch,
  withInterceptors,
} from '@angular/common/http';
import { provideAppInitializer } from './app-initializer';
import { provideApiUrl } from './app-url-token';
//import { provideRouter } from '@angular/router';
//import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
//import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
//import { routes } from './app.routes';
//import { authInterceptor } from './interceptors/auth.interceptor';
//import { errorInterceptor } from './interceptors/error.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withFetch(), withInterceptors([])),
    provideAppInitializer(),
    provideApiUrl(),
    //provideRouter(routes),
    //provideAnimationsAsync(),
    //provideCharts(withDefaultRegisterables()),
  ],
};

app.url.token

import { InjectionToken, Provider } from '@angular/core';
import { StorageService } from './storage.service';

export const API_URL_TOKEN = new InjectionToken<string>('API_URL_TOKEN');

function apiUrlFactory(storageService: StorageService): any {
  console.info(storageService.apiUrl);
  const apiUrl = storageService.apiUrl;
  if (apiUrl) {
    console.info('set apiUrl');
    return apiUrl;
  }
  throw new Error('API URL not found in configuration');
}

/*

export const API_URL_TOKEN = new InjectionToken<string>('API_URL_TOKEN');

export function provideApiUrl(): Provider {
  return {
    provide: API_URL_TOKEN,
    useValue: (storageService: StorageService) => storageService.getApiUrl,
    deps: [StorageService],
  };
}


*/

export function provideApiUrl(): Provider {
  return {
    provide: API_URL_TOKEN,
    useFactory: apiUrlFactory,
    deps: [StorageService],
    multi: false,
  };
}

Инициализатор приложения:

import { HttpBackend, HttpClient, HttpRequest } from '@angular/common/http';
import { APP_INITIALIZER, Provider } from '@angular/core';
import { firstValueFrom } from 'rxjs';
import { StorageService } from './storage.service';
import { map, catchError } from 'rxjs';

interface XiConfig {
  apiUrl: string;
}

const CONFIG_URL = '/assets/config.json';

    function appInitializer(http: HttpBackend, storageService: StorageService) {
      return () => {
        return http.handle(new HttpRequest('GET', CONFIG_URL)).pipe(
          map((config: any) => {
            storageService.apiUrl = config.apiUrl;
            console.info('Config loaded successfully');
          }),
          catchError((error: any) => {
            console.error('Error loading configuration:', error);
            throw error;
          })
        );
      };
    }

    export function provideAppInitializer(): Provider {
      return {
        provide: APP_INITIALIZER,
        useFactory: appInitializer,
        deps: [HttpBackend, StorageService],
        multi: true,
      };
    }

Демо-версия Stackblitz