Конфигурация среды выполнения с угловым

При планировании развертывания углового приложения, у вас может быть необходимость некоторой конфигурации, которая может отличаться для каждой среды, которая принимает приложение. Даже если вы развертываете только в одну среду, конфигурация может отличаться от того, используемого для локального развития. Часто приложение Frontend необходимо общаться с бэкэнда, URL которого может отличаться для каждой среды. В этой статье мы модифицируем угловое приложение для использования настраиваемого URL-адреса API таким образом, чтобы он мог отличаться для каждой среды, к которой вы развертываете.

Угловая среда

Угловой имеет встроенную систему окружающей среды, которая позволяет вам указать конфигурацию для нескольких сред. При наращивании приложения с заданной целевой средой угловые CLI заменит файл окружающей среды.ts с содержанием конкретной среды файла окружающей среды (E.g. Exectric.qa.ts, enducice.prod.ts).

Несмотря на то, что это довольно хорошо работает, недостаток этого состоит в том, что нам нужно перекомпилировать и воссоздать артефакты для каждой среды, на которую мы планируем развернуть. Поскольку идея позади Azure DEVOPOPS выпускает трубопровод, заключается в использовании единого артефакта сборки, и развернуть их, теоретически, бесконечное количество сред, этот подход не работает хорошо с тем, как мы устанавливаем постоянное развертывание.

Конфигурация среды выполнения

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

Один из способов сделать это в угловом приложении, включает в себя файл config.json в каталоге активов, который содержит настройки конфигурации. Включение файла JSON в каталоге активов обеспечивает копирование папки DIST при запуске сборки NG без необходимости внести какие-либо изменения в файл angular.json.

Продолжайте и создайте файл config.json, используя одно свойство APIURL:

    {
        "apiUrl": "http://localhost"
    }

Мы можем загрузить файл конфигурации как часть App_initializer, обеспечивая загрузку приложения до загруженного файла конфигурации. Прежде чем мы сможем включить фактическую App_initializer, мы создадим услугу, отвечающую за получение файла config.json с использованием httpclient ongular.

    @Injectable({
      providedIn: 'root'
    })
    export class ConfigService {
      config: Config;

      constructor(private http: HttpClient) {}

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

Как только мы добавили вышеуказанную службу в угловое приложение, мы можем подключить его в App_initializer Angular:

    export const configFactory = (configService: ConfigService) => {
      return () => configService.loadConfig();
    };

    @NgModule({
      ...
      providers: [
        {
          provide: APP_INITIALIZER,
          useFactory: configFactory,
          deps: [ConfigService],
          multi: true
        }
       ],
       ...
    })
    export class AppModule { }

Везде, где нам нужен доступ к конфигурации, специфичной для окружающей среды, мы можем ввести Configservice и получить доступ к свойству конфигурации.

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'ng-azure-devops';

      constructor(configService: ConfigService) {
        console.log('config', configService.config);
      }
    }

В приведенном выше компоненте мы впрыскиваем Configservice для регистрации всего объекта Config к консоли. Это должно позволить нам проверить, было ли конфигурация установлена правильно для любой среды. В реальном приложении вам, вероятно, необходимо ввести конфигурацию в службах, которые отвечают за вызование этой среды API, и используйте URL-адрес API для создания URL-карты конечного точка.

Замена файла конфигурации

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

Один из способов может быть включить несколько файлов конфигурации среды в элементе управления источником, (config.qa.json, config.prod.json, …) и поменяйте их во время развертывания.

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

Эта точка Inc. это консалтинговая компания, которая содержит две ветви: поток медиа и лабораторий. Эта точечная носитель — это часть, ответственная за сохранение разработчиков актуальна с достижениями на веб-платформе. Для того, чтобы сообщить авторам новых выпусков или изменений, внесенных в рамки/библиотеки, размещены события, и публикуются видео, статьи и подкасты. Между тем, эта точечная лаборатория обеспечивает команды с опытом веб-платформы с использованием таких методов, как наставничество и обучение.

Оригинал: «https://dev.to/thisdotmedia/runtime-environment-configuration-with-angular-4f5j»