Angular environment variables

Переменные окружения Angular

Находятся в файлах папки src\environments\*.environment.ts. Angular CLI при создании приложения создает 2 файла:

  • environment.ts - используется по-умолчанию
  • environment.prod.ts

environment.ts файл может быть заменён во время сборки проекта с помощью массива fileReplacements. Команда ng build --prod заменяетenvironment.ts на environment.prod.ts. Список замен файлов можно найти в файле angular.json.

Пример

src\environments\environment.ts

export const environment = {
  production: false,
  apiUrl: 'http://example.com/api/',
};

src\environments\environment.prod.ts

export const environment = {
  production: true,
  apiUrl: 'http://prod.com/api/'
};

Использование в компоненте src\app\app.component.ts

import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';   <====

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  url = environment.apiUrl;                                   <====
  title = 'Env';

  ngOnInit() {
    console.log(this.url);
  }
}

При сборках ng build и ng build --prod в консоль будет попадать http://example.com/api/ и http://prod.com/api/ соответственно.

Конфигурации

Конфигурации позволяют создавать дополнительные окружения.

Если вы посмотрите на свой angular.json файл, вы увидите, что имеются настройками для каждой конфигурации в секции projects > <имя_проекта> > architect > build > configurations (optimization, sourceMap, aot, ...)

Содержимое angular.json

...
"production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    }
  ]
}
...

Создание конфигурации vasya

Добавьте новый файл src/environments/environment.vasya.ts

export const environment = {
  production: true,
  apiUrl: 'http://vasya.ru/'
};

Создайте конфигурцию в build секции projects > <имя_проекта> > architect > build > configurations:

...
"vasya": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.vasya.ts"
    }
  ]
}
...

Теперь можно собирать проект с конфигурацией vasya. В свойство apiUrl будет попадать значение http://vasya.ru/.

ng build --configuration=vasya
ng build -c vasya

Если необходимо использовать конфигурацию в ng serve, то следует в секцию projects > <имя_проекта> > architect > serve > configurations добавить конфиг с browserTarget.

...
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "<project_name>:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "<project_name>:build:production"
    },
    "vasya": {                                              <=====
      "browserTarget": "<project_name>:build:vasya"         <=====
    }
  }
},
...

После проделанных манипуляция доступны команды:

ng serve --configuration=vasya
ng serve -c vasya

Похожие записи

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

Angular. Can't set breakpoints in VS Code

Вариант решения проблемы, когда не срабатывают точки остановки при разработке Angular приложений в редакторе VS Code
10 апреля 2018 г. в Angular

@Directive v/s @Component in Angular

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

13 августа 2018 г. в Angular