Переменные среды с Angular CLI

Настроить переменные окружения с помощью angular CLI довольно сложно. angular CLI упрощает работу со средами как для разработки, так и для производства. environment.*.ts файлы отвечают за обработку сред в angular CLI.

Проблема возникнет с развертыванием приложения angular в Heroku, и пока мы включим конвейер для него, сценарий npm heroku-postbuild запускается, когда создается ярлык Heroku, когда вы «продвигаете» выпуски через свой Конвейер Heroku (например, от «разработки» к «промежуточному этапу» и «производству»), предварительно созданный ярлык Heroku продвигается «как есть» и НЕ перестраивается.

Consider a scenario: То, что вы развертываете изменения в промежуточной стадии, но ваш package.json запускает «heroku-postbuild»: ng build --prod ' означает, что когда вы git нажимаете на свой « разработка », слизняк будет построен с опциями« prod ». Это нормально для «производственного» приложения. вместо этого будет использоваться `ng build --prod`, затем ` environment.prod.ts`.

environment.prod.ts

export const environment = { 
   production: true,
   productionApiUrl: 'http://domain.com'
}

angular.json

"environmentSource": "environments/environment.ts",
"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

Slug будет построен с использованием вышеупомянутого ‘productionApiUrl’, что означает, что при постановке он будет указывать на конечную точку производственного API.

Итак, здесь возникает вопрос: как мы можем изменить свойства в зависимости от среды (промежуточной и производственной) или переменных среды?

Ее можно решить с помощью dotenv, но, к сожалению, простая попытка запустить config функцию dotenv, похоже, не работает с environment.*.ts файлами - это, безусловно, самый прагматичный способ сделать это. Но когда я пытался это сделать, все просто всплывало undefined

Следующие шаги помогут использовать dotenv (process.env) с angular CLI.

  1. npm install -g dotenv
  2. Добавьте .env с вашими чувствительными переменными среды согласно dotenv README
  3. Добавьте сценарий (я назвал его config-env.ts, который динамически генерирует файл для вашей среды с использованием переменных среды (process.env)
  4. Обновите scripts в своем package.json, чтобы сначала запустить config-env.ts, а затем соответствующую ng buildкоманду

package.json

"config": "ts-node ./src/config-env.ts",
"start": "npm run config -- && node server.js",
"heroku-postbuild": "npm run config -- && ng build --prod"

config-env.ts

import { writeFile } from 'fs';
require('dotenv').config();
const environment = process.env.ENVIRONMENT;
let apiURL;
if (environment === 'production') {
  apiURL = process.env.PRODUCTION_API_ENDPOINT;
} else if (environment === 'test') {
 apiURL = process.env.TEST_API_ENDPOINT;
}
const targetPath = `./src/environments/environment.prod.ts`;
const envConfigFile = `
export const environment = { 
    production: true, 
    apiUrl: '${apiURL}'};`
writeFile(targetPath, envConfigFile, function (err) {
  if (err) { 
       console.log(err);
}

.env

ENVIRONMENT= // define environment here
PRODUCTION_API_ENDPOINT= // production api endpoint
TEST_API_ENDPOINT= // staging api endpoint

Вышеупомянутый процесс сгенерирует файл environment.prod.ts с разными конечными точками API на основе переменных среды, как и выше, будет легко использовать другие свойства с dotenv