В этой статье я покажу вам, как устанавливать и получать доступ к переменным среды в Angular 16.
1 — Создайте пустой проект Angular
Во-первых, давайте начнем с создания пустого проекта Angular 16. Для этого откройте терминал в VScode и введите следующую команду:
> ng new environmentVariablesDemo
и обязательно следуйте командным подсказкам. Это может занять некоторое время, потому что Angular собирается загрузить необходимые пакеты. Ниже приведена ссылка на статью, которую я создал, которая покажет вам, как создать пустой проект Angular 16 вместе со всеми необходимыми требованиями.
2 — Создайте базовые среды с помощью Angular CLI.
Angular CLI предоставляет вам возможность создать папку среды вместе с файлами среды разработки и рабочей среды. Чтобы использовать Angular CLI, введите следующую команду в терминале вашего проекта:
ng g environments
Выполнив команду, вы заметите, что в проект добавлена новая папка под названием «environments». Кроме того, добавлены два файла TypeScript среды. Один для разработки, другой для производства.
Кроме того, если вы откроете файл src/angular.json и найдёте раздел development, вы заметите, что была добавлена следующая конфигурация:
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.development.ts"
}
]
Этот дополнительный атрибут указывает проекту Angular заменить файл среды prod файлом разработки, когда приложение обслуживается/компилируется с использованием среды разработки.
