Как автоматически изменять URL-адреса в службах, после изменения URL-адреса это должно повлиять на все компоненты без сохранения / сборки / запуска в angular6

Question

Мы размещаем новое приложение с angular 6, и у нас есть много серверов с разными URL, я хочу изменить их автоматически (например, файл .property в java). После поиска в Google я получил несколько ответов, таких как изменение пути в файле environment.ts, так что это повлияет на все компоненты. но это не совсем мои требования, значит, если я изменю URL в файле environment.ts, мы должны сохранить файл и нам нужно скомпилировать его еще раз. Так что именно с этой проблемой я сталкиваюсь, я не хочу сохранять / компилировать файл.

Пожалуйста, помогите мне в этой ситуации.

файл service.ts.

emplLoginCheckUrl = this.baseUrl+"/checkValidUser";

Я пытался изменить базовый URL из файла environment.ts, он работает правильно, но после сохранения файла я не хочу сохранять файл, он должен измениться автоматически.

.service.ts file.

 emplLoginCheckUrl = this.baseUrl+"/checkValidUser";

       validateUserDetails(employeeDetails): Observable<any> {
            console.log(this.baseUrl);
            return this._httpClinet.post(this.emplLoginCheckUrl, employeeDetails);
        }

файл environment.ts.

export const environment = {
  production: false,
  baseUrl: "http://rest/somerestservice"
};

Ожидаемое:

URL должны меняться автоматически без сохранения / запуска / компиляции / сборки снова и снова, потому что только один раз я могу сделать сохранение / запуск / компиляцию / сборку во время хостинга. после размещения, если я хочу изменить URL-адреса, я не могу зайти туда, изменить путь и не могу скомпилировать его еще раз.

Answer 1

Это общий сценарий для приложения Angular.
То есть вы не хотите снова собирать и компилировать код на сервере, если вы хотите изменить внутренний URL-адрес API. Ниже приводится подход, который я использую в своих проектах Angular.

Подход:

1. Создайте файл config.json в папке assets, поскольку папка ресурсов присутствует на сервере.

{  // ---------- config.json---------
  "serviceUrl": "http://172.168.1.190:1393/"
}

2. Создайте переменную serviceUrl в своем файле constants, поскольку у вас будет постоянный файл для вашего углового приложения. Присвойте этой переменной значение empty, поскольку эта переменная будет хранить обновленный URL-адрес службы позже.

export class AppConstants { 

  public static xhr = {
        url: {
                serviceUrl: ''  // <===== empty value
             }
       }
}

3. Реализуйте APP_INITIALIZER, чтобы прочитать файл config.json при запуске приложения. И прочитайте значение serviceUrl из config.json и назначьте это значение той же самой переменной, присутствующей в файле constants.

   {   // in app.module.ts providers
      provide: APP_INITIALIZER,
      useFactory: ConfigurationServiceFactory,
      deps: [ConfigService],
      multi: true
    }
---------------------------------------------------
// ConfigurationServiceFactory which is used at App initialization
export function ConfigurationServiceFactory(configService: ConfigService) {
return () => configService.load();
};
---------------------------------------------------
// this method is called at application start up
// and config.json file is read here, and the service url from
// constant file is replaced by the value provided in the assets's config.json
load() {
const configUrl = '~/../assets/config.json';
    return new Promise((resolve) => {
        this.http.get(configUrl)
        .toPromise()
        .then((config: any) => {
            this.config = config;
            console.log('Configurationd fetched  : ', this.config);
            //----- variable is updated now with new value from the file -------
            AppConstants.xhr.url.serviceUrl = this.config.serviceUrl;
            resolve(true);
        })
        .catch( (err) => console.log(err));
    });
}

4. Для каждого HTTP вызова используйте constants файла serviceUrl в качестве базового URL.

   this.http.get('${AppConstants.xhr.url.serviceUrl}api/roles/list')

5. Поскольку изменение значения переменной в папке assets config.json будет получено при запуске и заменит постоянную переменную файла, которую мы будем использовать для вызовов api.

Код инициализатора приложения с файлом config.json (для справки)

Answer 2

Это, в основном, шаблон «хорошо известный файл». Это путь на веб-сервере, который предоставляет информацию о конфигурации. Приложения должны извлекать текущую конфигурацию через HTTP-запрос, пока они загружаются, и могут обновить конфигурацию путем повторной выборки данных.

https://ma.ttias.be/well-known-directory-webservers-aka-rfc-5785/

Он основан на IETF RFC:

https://tools.ietf.org/html/rfc5785

Answer 3

Вы можете передать конечную точку в качестве параметра запроса при первом обращении к приложению, например:

http://localhost/yourapplication?baseUrl=http://rest/somerestservice

, а затем прочитайте значение этого параметра запроса в файле app.component.ts и установите для него переменную среды baseUrl.

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

Обновление: как OP запрошенный код

Демонстрация: https://angular -sku9xx.stackblitz.io /? BaseUrl = http://rest/somerestservice

Код для демонстрации: https://stackblitz.com/edit/angular-sku9xx?file=src/app/app.component.ts