Вы можете сделать это без 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.
Надеюсь, вам немного помогла моя статья. Хотите заглянуть на мою домашнюю страницу?