Установить переменную окружения во время сборки

Question

Я создал приложение с Angular-CLI и для целей отладки хотел бы показать некоторую информацию в приложении о выполняемой сборке. Например, ветвь git или время сборки и т. Д.

Я мог написать сценарий, который управляет src/environments/environment.ts, но я спрашиваю себя, есть ли лучший способ. Тем более, что этот файл является частью контроля источника.

Переключатель на Угловом CLI для перезаписи значения переменной будет приятным. Предположим, что переменные environment.build и environment.time настроены на dummys в environment.ts. Затем с ng --env[build]=master --env[time]=201612130742 я бы переписал их с вычисленными значениями.

Но, насколько мне известно, чего-то подобного не существует?

Answer 1

Вы можете использовать gulp-ng-config, чтобы ввести конфигурацию в процесс CI/CD. Кроме того, взгляните на статью this, чтобы узнать больше о том, как ее реализовать.

Answer 2

угловой-cli поставляется с окружающей средой. если вы уже выбрали проект с помощью ng eject, вам нужно будет настроить файлы среды вручную.

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

Мой package.json обеспечивает флаг среды в процессе построения сценария

"scripts": { 
    "ng": "ng", 
    "start": "webpack-dev-server --env.target=local --port=4200 --history-api-fallback", 
"build:prod": "webpack --env.target=prod --env.zip --env.aot --env.extreme --colors", 

Вы можете использовать флаг среды

// export a function that returns a promise that returns the config object 
module.exports = function(env) { 
const isAot = env.aot || false; 
const isZip = env.zip || false; 
const isExtreme = env.extreme || false; 
const isAnalyze = env.analyze || false; 
const isVirtualbox = env.virtualbox || false; 
const isLocal = env.target === 'local'; 
if(isLocal) { /* set the css file to a variable mycssfile*/ }