appsettings. json загрузка файла после инициализации приложения на APP_INITIALIZER

Question

Я пытался развернуть в DevOps приложение Angular 8 и использовать конфигурацию внутри. json файлов, чтобы не перестраивать все приложение для различных сред.

Я использовал эти 2 сообщения для создания всех конфигураций:

Непрерывное развертывание Angular в Azure Служба приложений с Azure DevOps

и ответ переполнения стека:

App.settings - способ Angular?

Примечание , что меня не интересует использование environment.ts, так как этот путь потребует от меня повторного построения решения для каждой среды.

Итак, я подготовил весь свой код следующим образом:

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [
        {
             provide: APP_INITIALIZER,
             useFactory: (appConfigService: ConfigService) => {
             return () => {
                //Make sure to return a promise!
                return appConfigService.loadAppConfig();
             };
          },
          deps: [ConfigService],
          multi: true
       }
    ],
    bootstrap: [AppComponent]
 })
 export class AppModule {}

My ConfigService.ts :

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

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
private appConfig: any;

constructor(private http: HttpClient) {}

loadAppConfig() {
  return this.http.get('./assets/appconfig.json')
    .toPromise()
    .then(config => {
      this.appConfig = config;
    });
}

get apiBaseUrl() {
    if (!this.appConfig) {
      throw Error('Config file not loaded!');
    }

    return this.appConfig.apiUrl;
  }
}

И затем, основной объект, который должен загрузить appconfig. json информация:

  export class ApiService {
  apiUrl: string;

     constructor(private readonly httpClient: HttpClient,
          private configService: ConfigService) { 
            this.apiUrl = this.configService.apiBaseUrl;
     }

     ngOnInit() {
       this.apiUrl = this.configService.apiBaseUrl;
     }    
  }

Но тогда, при загрузке приложения, появляется это сообщение:

Если я отлаживаю приложение, файл appsettings.json загружает информацию, но тогда он выглядит как angular init происходит перед загрузкой appsettings.

Что я делаю не так?

Answer 1

Таким образом, все было хорошо настроено, за исключением одной важной вещи: Конструкторы используются только для внедрения зависимостей . Поэтому в этот момент я не могу сделать это:

constructor(private readonly httpClient: HttpClient,
      private configService: ConfigService) { 
        this.apiUrl = this.configService.apiBaseUrl;
 }

РЕШЕНИЕ

Затем я удалил строку внутри конструктора:

constructor(private readonly httpClient: HttpClient,
      private configService: ConfigService) { 
 }

И просто позвонил apiBaseUrl везде, где мне это было нужно, и это сработало:

public get<T>(url: string): Observable<T> {
    return this.httpClient.get<T>(`${this.configService.apiBaseUrl}${url}`);
}

Answer 2

Вы можете вернуть Promise и разрешить его в обратном вызове subscribe HTTP-запроса следующим образом:

loadAppConfig() {
  return new Promise((resolve) => {
     this.http.get('./assets/appconfig.json').subscribe(config => {
        this.appConfig = config;
        resolve();
     })
  });
}