Angular 2 Установите APP_BASE_HREF со значением из Promise/Observable

Я попробовал ваше решение. Проблема в том, что в то время

{ provide: APP_BASE_HREF, useFactory: (config) => config.appBaseHref, deps: [ConfigService] }

config.appBaseHref еще не установлен. Когда я отлаживаю код, я вижу, что APP_INITIALIZER выполняется после провайдера из APP_BASE_HREF

Это приводит к тому, что BASE_HREF не установлен.

У нас была та же задача: установить APP_BASE_HREF динамически на основе результата вызова асинхронного API, чтобы разрешить маршрутизацию приложения, к которому можно получить доступ через разные URL-адреса.

Хотя решение, представленное Гюнтером, выглядит мило, к сожалению, оно не сработало, по крайней мере, с Angular 7. В нашем случае APP_BASE_HREF всегда имел приоритет над APP_INITIALIZER, поэтому мы не могли инициализировать APP_BASE_HREF на основе разрешенного значения обещания, возвращаемого из инициализатора.

Вместо этого я реализовал вызов API перед начальной загрузкой Angular, а затем внедрил поставщика, чтобы он был доступен в контексте Angular.

Добавление к main.ts:

fetchConfig().then(config => {
  platformBrowserDynamic([ { provide: ConfigData, useValue: config } ])
    .bootstrapModule(AppModule)
    .catch(err => console.log(err));
});

Затем мы можем настроить APP_BASE_HREF в providers внутри app.module.ts:

providers: [
  // …
  { 
    provide: APP_BASE_HREF, 
    useFactory: (config: ConfigData) => config.base, 
    deps: [ ConfigData ] 
  }
]

[edit 2019-08-21] Уточнение согласно комментариям: fetchConfig() — это запрос API, который получает конфигурацию и возвращает Promise. И ConfigData — это не служба Angular, а просто простой класс, экземпляр которого создается в fetchConfig() и который обеспечивает безопасность типов при доступе к нему позже в моем приложении:

function fetchConfig (): Promise<ConfigData> {
  return fetch('/api/config')
    .then(response => response.json())
    .then(response => new ConfigData(response));
}

Вы можете использовать APP_INITIALIZER, чтобы получить путь заранее, а затем использовать зависимость, как показано в Angularjs2 - предварительная загрузка конфигурации сервера перед запуском приложения

export function loadConfig(config: ConfigService) => () => config.load()

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule,
        routes,
        FormsModule,
        HttpModule],
    providers: [
        ConfigService,
        BackendRequestClass,
        { provide: APP_INITIALIZER,
          useFactory: loadConfig,
          deps: [ConfigService], 
          multi: true },
        { provide: APP_BASE_HREF, useFactory: (config) => config.appBaseHref, deps: [ConfigService] }

    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

ConfigService может внедрить BackendRequestClass или Http и получить данные, а затем сделать их доступными, используя свое свойство appBaseHref (просто пример того, как это можно сделать).