В приложениях Angular есть некоторые данные, которые разработчик должен изменять для каждой сборки в зависимости от типа использования.

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

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

Бывает много..

Это происходит все время…

В этом посте я хотел бы помочь вам легко выйти из этой глупой ситуации.

За несколько шагов вы измените содержимое уже созданных и развернутых файлов приложения, и это изменение вступит в силу немедленно.

{ 
  property : value ,
  property2 : value2,
}

1- создайте новый файл типа json и сохраните его в папке с ресурсами, так как эта папка не компилируется при каждом запуске приложения. 089

import { Injectable } from ‘@angular/core’;
@Injectable({
  providedIn: ‘root’
})
export class ConfigService {
  config_data: any; 
  // replace any with the type of data you want to store
  constructor() {}
}

2- создайте службу для хранения данных (в нашем случае я назвал ее ConfigService

3- мы будем использовать HttpClient для получения данных из файла json в службу каждый раз, когда приложение запускается.
поэтому мы будем внедрять HttpClient в нашу функцию конструктора в ConfigService

import { HttpClient } from ‘@angular/common/http’;
constructor (private http: HttpClient) {}

Этот шаг является самым важным. Мы создадим функцию load(), которая будет получать данные из файла json и сохранять их в этом ConfigService.

load() {
  const json_file_path= ‘assets/replace_this_with_json_file_path’;
  return new Promise((resolve, reject) => {
    this.http.get<any>(json_file_path).toPromise().then(
      result => {
        this.config_data = result;
        resolve(this.config_data);
     }).catch(() => {
       reject(`couldn’t load file ‘${json_file_path}’ : ${JSON.stringify(result)}`);
    });
  });
}

4- это функция load(), в которой мы используем HttpClient для загрузки данных из json-файла в ConfigService.
Возврат нового Promise() при работе с асинхронным потоком данных (HttpClient), что означает, что нам нужно подождать пока мы не получим один из двух результатов ответа/ошибки и с помощью этого обещания обработаем их в форме разрешения/отклонения соответственно.
обратите внимание, что после того, как мы использовали свойство config_data для хранения данных, которые мы извлекаем из http-запроса внутри наша функция. Чтобы мы могли внедрить наш сервис везде, где нам нужно в нашем приложении, и использовать это свойство.
Таким образом, вы можете изменить данные внутри файла json даже после завершения сборки, даже после завершения развертывания, и вы повторяете файл содержимое на реальном сервере, и используя этот запрос внутри функции load(), вы получите новое значение.

5- теперь мы должны вызвать функцию load() после инициализации приложения. для этого мы создаем функцию в app.module.ts и используем ее внутри массива провайдеров следующим образом:

import { ConfigService } from 'ConfigService_path';
/* before @NgModule({}) */
export function getConfigData(configSer: ConfigService) {
  return () => configSer.load();
}

затем мы используем эту функцию внутри массива провайдеров следующим образом:

import { APP_INITIALIZER } from '@angular/core';
@NgModule({
  declarations: [...],
  imports: [...],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: getConfigData,
      deps: [ConfigService],
      multi: true
    },
  ...]

чтобы узнать больше о APP_INITIALIZER, вы можете проверить эту ссылку: https://angular.io/api/core/APP_INITIALIZER#app_initializer

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

Надеюсь, это информативно и полезно…