Проблема с чтением из файла json при обновлении страницы Angular

Question

У меня есть приложение angular, и клиент хочет, чтобы путь к Backend был в файле json, поэтому он может легко изменить его без необходимости другого развертывания.

Ну, я сделал это, но когда я обновляю sh страницу или закрываю приложение и снова открываю его, приложение не определяет путь к бэкэнду, это похоже на проблему задержки или синхронизации.

Это ошибка в console:

 http://***/undefinedapi/Leave/GetlistLeave

Вот как я это сделал: Файл json:

    {
      "ApiRoot": "http://***/"
    }

Как я читал константу из файла json:

     import { Injectable } from '@angular/core';
     import { Http, Response } from '@angular/http';
     import { Observable } from 'rxjs';
     import { apiRoot } from '../model/model.apiRoot';
     import { map } from 'rxjs/operators';

     @Injectable({
     providedIn: 'root'
     })
     export class apiRootService {
    static apiRoot: string;
     constructor(private http: Http) { }
     public initialiseApiRoot()
     {

         this.http.get('./assets/apiRoot/apiRoot.json').pipe(map((response: Response) => 
      <apiRoot>response.json())).subscribe(data => {
          apiRootService.apiRoot = data['ApiRoot'];
      })

     }
   }

, а затем я вызываю эту функцию в конструкторе app.component.ts следующим образом:

        this.apiRootService.initialiseApiRoot();

и изменяю вызов api в каждой службе c например:

       return this.http.get(apiRootService.apiRoot + .....

Любой hlp и спасибо

Answer 1

Что ж, предположим, у вас нет проблемы с кешем. Если это не проблема кеша, возможно, это вопрос времени.

Вы можете попробовать установить apiRoot во время инициализации вашего приложения (до загрузки app.component.ts). Вы можете сделать это, указав APP_INITIALIZER, как описано в Angular docs . Если вы используете фабрику, возвращающую функцию, предоставляющую обещание, вы отложите инициализацию приложения до тех пор, пока не загрузится ваш файл json, чтобы вы могли инициализировать apiRoot. Фабрика - полезный подход, потому что она позволит вам внедрить службу HttpClient во время инициализации в провайдере (она понадобится вам для получения вашего файла json).

Вы можете сделать что-то вроде (в ваш app.module.ts):

...
import {APP_INITIALIZER} from '@angular/core';
...

// Angular will inject the HttpClient because you'll 
// tell it that this is a dependency of this factory
// in the providers array 
export function getApiRoot(http: HttpClient) {
  return () => {
    return this.http.get('./assets/apiRoot/apiRoot.json').pipe(
      map((response: Response) => <apiRoot>response.json()),
      tap((data: any) => apiRootService.apiRoot = data['ApiRoot'])
    ).toPromise();
  };
}

...

@NgModule({
  imports: [
    ...
    HttpClientModule,
    ...
  ],
  providers: [
    ...
    {
      provide: APP_INTIALIZER,
      useFactory: getApiRoot,
      multi: true,
      deps: [HttpClient]
    }
    ...
  ]

})
export class AppModule {}

Answer 2

, потому что вы идете неверным путем. вы указываете URL после инициализации приложения. См .: - https://medium.com/voobans-tech-stories/multiple-environments-with-angular-and-docker-2512e342ab5a. это даст общее представление о том, как выполнить сборку один раз и развернуть где угодно