Объявление @ngx-env/builder

Вы когда -нибудь хотели употреблять переменные, объявленные в вашей среде, внутри вашего углового приложения?

# GitHub Action command
NG_APP_GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }} ng build

Переменные среды могут быть полезны для:

отображение информации условно на основе где проект развернут
потребление конфиденциальных данных, которые живет вне контроля версий

@ngx-env/builder

С @ngx-env/builder Переменные среды будут определены для вас на Process.env , как в приложениях Node.js.

Например, наличие переменной среды с именем Ng_app_not_secret_code будет выставлен в вашем TS/JS как Process.env. Ng_app_not_secret_code Анкет

Переменные среды встроены во время сборки Анкет

Добавить @ngx-env в свой проект CLI

ng add @ngx-env/builder

Определить переменные среды в .env

NG_APP_ENABLE_ANALYTICS=false
NG_APP_VERSION=$npm_package_version

Использовать в TS и HTML

@Component({
  selector: "app-footer",
})
export class FooterComponent {
  version = process.env.NG_APP_VERSION;
  branch = process.env.NG_APP_BRANCH_NAME;
  token = process.env.NG_APP_GITHUB_TOKEN;
}


 {{ 'process.env.NG_APP_BRANCH_NAME' | env }} 
 {{ 'NG_APP_BRANCH_NAME' | env }} 
 {{ branch }}



  NgApp on %NG_APP_BRANCH_NAME%

Запустите свои команды CLI

npm start
# Command Line environment variable
NG_APP_BRANCH_NAME=`git branch --show-current` NG_APP_GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }} npm run build

Переменные, определенные в .env Файл или в командной строке вводятся в ваше угловое приложение.

Ссылки

Репозиторий GitHub: https://github.com/chihab/ngx-env Анкет
Пакет NPM: https://www.npmjs.com/package/@ngx-env/builder Анкет

Оригинал: «https://dev.to/chihab/announcing-ngx-env-builder-13m2»