«Альтернативные конфигурации» можно создать, передав имя «цели» флагу
--configuration.

Эта статья является частью серии статей о настройке сборок Angular.

  1. Настройте систему сборки Angular для локальной, Dev, Stage и Prod
  2. Фавиконки для каждой среды
  3. Ветка Git вашего приложения в заголовке (за оболочку)

Добавьте команды dev, stage и prod в файл package.json.

"scripts": {
    ...
    "start": "ng serve", <-- local build
    "start:dev": "ng serve --configuration dev",
    "start:stage": "ng serve --configuration stage",
    "start:prod": "ng serve --configuration prod",
    "build:dev": "ng build --configuration dev",
    "build:stage": "ng build --configuration stage",
    "build:prod": "ng build --configuration prod",
    ...

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

"architect": {
  "build": {
    "configurations": {
      "dev": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.dev.ts"
          }
        ],
        ...
      },
      "stage": {
        ...
      },
      "prod": {
        ...
      }

Приведенная выше конфигурация демонстрирует, что массив файлов целевого объекта сборки dev использует environment.dev.ts для всего приложения, а не обычный environment.ts.

Подсказка: Просмотрите документы для более полезных и даже сложных вариантов.

Добавьте другие цели сборки stage и prod точно так же, как мы сделали с dev выше.

Еще одно обновление файла angular.json.

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        "browserTarget": "app-name:build" <-- default and local
    },
    "configurations": {
        "dev": {
            "browserTarget": "app-name:build:dev"
        },
        "stage": {
            "browserTarget": "app-name:build:stage"
        },
        "prod": {
            "browserTarget": "app-name:build:prod"
        }
    }
},

Итак, теперь, когда мы запускаем команду serve, мы можем указать, какую систему сборки она будет использовать.

В любом файле Angular для нашего приложения мы можем:

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

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

npm run start <-- environments/environment.ts active
npm run start:dev <-- environments/environment.dev.ts active
npm run start:stage <-- environments/environment.stage.ts active
npm run start:prod <-- environments/environment.prod.ts active

См. Angular doc на эту тему и сборка целевых конфигураций.