Вы можете сделать это без dotenv.

Предлагаемое чтение: Часть 1 Клейтона Фиделиса

На самом деле нам даже не нужен dotenv, если мы действительно хотим читать переменные системной среды (а не внешний файл). И в этой статье будет более полный пример использования переменных среды в приложении Angular.

npm i -D @angular-builders/custom-webpack
npm i -D @angular-builders/dev-server
npm i -D @angular-devkit/build-angular

Нам нужны эти установки, потому что мы настраиваем то, как Angular строит и обслуживает. Клейтон хорошо объясняет это в Части 1.

Внутри созданного вами webpack.config.js, того, на который есть ссылка в вашем файле angular.json, внутри вам просто нужно что-то вроде этого:

const webpack = require('webpack')
const keyPrefix = 'MYAPP_';
const keys = Object.keys(process.env).filter((key) => key.startsWith(keyPrefix));
let env = {};
keys.forEach(key => env[key] = JSON.stringify(process.env[key]));
console.log('env=',env);
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'ENV_VARS': env
    })
  ]
}

process.env уже установлен без использования dotenv. Вы можете увидеть это во время сборки, добавив console.log (process.env) вверху этого файла. Там будет много лишнего, о чем ваше приложение не позаботится. Поэтому я предлагаю использовать префикс типа «MYAPP_» для переменных среды, которые вы хотите прочитать. Вот почему мы видим, что в этом коде ключи фильтруются.

Затем мы используем webpack.DefinePlugin, чтобы установить переменную ENV_VARS. Важно понимать, как работает DefinePlugin, он просто выполняет замену строки внутри вашего скомпилированного кода всякий раз, когда видит токен ENV_VARS. Вот почему мы должны вызывать JSON.stringify () для значений переменных.

Давайте создадим внутри нашего приложения Angular файл src / environment / environment-variables.ts и вставим туда этот код:

import { localhostEnvironment } from './localhost-environment';
declare let ENV_VARS: {[key: string]: string};
export const Environment = Object.assign(localhostEnvironment, ENV_VARS);

Здесь мы видим объявление переменной для ENV_VARS. Помните, здесь webpack.DefinePlugin выполняет подстановку строк. Но у нас также есть экспорт, в котором мы присвоили это константе с именем «Environment», которую теперь мы можем использовать в нашем коде Angular. Кроме того, мы видим, что настройки по умолчанию были объединены из localHostEnvironment из файла localhost-environment.ts. Здесь мы установим значения по умолчанию для всего, к чему можно будет вернуться. Таким образом, разработчику не нужно устанавливать переменные Env на своей рабочей станции. Вот что вы можете найти в localhost-environment.ts:

export const localhostEnvironment: {[key: string]: string} = {
  MYAPP_DEFAULT_SETTING: `this is a default that might be overwritten by an environment var of same name`
};

Нам нужно понимать, что конфигурация среды печатается в скомпилированных J-файлах во время сборки. Затем этот собранный артефакт заблокирован для настройки сервера сборки. Не ожидайте, что эти переменные изменятся при развертывании кода в другой среде.

Также в результате мы не можем рассматривать это как способ хранения какой-либо секретной конфигурации. Опять же, поскольку значения переменных среды сервера сборки присутствуют в скомпилированных файлах Js.

Внутри app.component.ts мы теперь можем импортировать Environment и использовать оттуда строки. Здесь я получаю доступ к известному ключу (MYAPP_GOOD_VARIABLE) и неизвестному ключу (DONT_EXIST). Также перейдите к настройке по умолчанию, полученной из localhost-environment.ts

import { Component } from '@angular/core';
import { Environment } from './environment-variables';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'EnvironmentVars';
  MYAPP_GOOD_VARIABLE = Environment.MYAPP_GOOD_VARIABLE;
  DONT_EXIST = Environment.DONT_EXIST;
  MYAPP_DEFAULT_SETTING = Environment.MYAPP_DEFAULT_SETTING;
}

И мы видим, что безопасно даже ссылаться на несуществующие ключи, они просто не будут определены. Вот HTML-код, который отображает переменные среды:

<h2>Env var MYAPP_GOOD_VARIABLE={{MYAPP_GOOD_VARIABLE}}</h2>
<h2>Env variable DONT_EXIST={{DONT_EXIST}}</h2>
<h2>Default value Env var MYAPP_DEFAULT_SETTING={{MYAPP_DEFAULT_SETTING}}</h2>

Давайте протестируем с некоторыми реальными переменными окружения. Я использовал эти шаги, чтобы добавить экспорт в мой ~ / .bash_profile моего Mac.

Надеюсь, вам немного помогла моя статья. Хотите заглянуть на мою домашнюю страницу?