Среды Dev/Prod для различных конфигураций клиентов

Question

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

В моем случае я решил создать конфиг для каждого клиента:

// angular.json excerpt
"architect": {
    "build": {
        "configurations": {
            "customer-1": {
                "fileReplacements": [
                    {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.customer-1.ts"
                    }
                ]
            },
            "customer-2": {
                "fileReplacements": [
                    {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.customer-2.ts"
                    }
                ]
            },
        }
    },
    "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "configurations": {
            "customer-1": {
                "browserTarget": "my-app:build:customer-1"
            },
            "customer-2": {
                "browserTarget": "my-app:build:customer-2"
            },
}

Я использую файлы среды для управления различными пользовательскими настройками и production флаг:

// environment.customer-1.ts excerpt
const environment = {
  production: true,
  customer: "Customer 1",
};


// environment.customer-2.ts excerpt
const environment = {
  production: true,
  customer: "Customer 2",
};

Наконец, мне нужен способ определить, было ли приложение запущено с использованием ng serve или ng build команда, чтобы импортировать некоторые поддельные провайдеры в модуле приложения.

Я пытался использовать environment.production флаг, но, очевидно, это всегда будет правдой:

import { environment } from '../environments/environment';

@NgModule({
  providers: [
    environment.production // is always true since I've set the flag in all customer-specific environment.ts files
       ? []
       : nonProductionProviders,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Единственный способ поддержать этот сценарий - создать отдельный environment.ts файлы, а также соответствующие конфиги, например

• /src/environment.customer-1-dev.ts
• /src/environment.customer-1-prod.ts

// angular.json excerpt
"architect": {
    "build": {
        "configurations": {
            "customer-1-dev": {
                "fileReplacements": [
                    {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.customer-1-dev.ts"
                    }
                ]
            },
            // etc.

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

Answer 1

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

Вы также можете иметь скрипт, который изменяет значение в src/environments/environment.customer-XX.ts файл перед запуском использования ng serve, но вы рискуете отправить этот измененный файл в git по ошибке.

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

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