«Альтернативные конфигурации» можно создать, передав имя «цели» флагу --configuration
.
Эта статья является частью серии статей о настройке сборок Angular.
- Настройте систему сборки Angular для локальной, Dev, Stage и Prod
- Фавиконки для каждой среды
- Ветка 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 на эту тему и сборка целевых конфигураций.