Angular environment variables

Опубликовано в Angular • 07 января 2019 г. • 2 мин. на чтение

Переменные окружения 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

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