Несколько конфигураций среды в Angular

Здравствуйте, добро пожаловать в еще одну статью о том, как управлять несколькими средами, на этот раз в Angular. Это очень распространенное требование в любом приложении, поскольку приложение обычно имеет несколько сред, таких как DEV, QA, Staging & Production.

Файлы, которые нужно будет изменить в нашем

package.json
angular.json
environment.ts

Нам также нужно добавить несколько дополнительных файлов для управления несколькими средами (предполагая, что мы настраиваем для двух сред, я создал два файла)

environment.dev.ts
environment.qa.ts

Изменения в package.json

Нам нужно добавить команды в наш раздел сценария, как выделено, чтобы мы могли начать поддерживать такие команды, как npm run build: {environment_name}

"scripts": { 
"ng": "ng",
"start": "ng serve",
"build:dev": "ng build --configuration=dev",
"build:qa": "ng build --configuration=qa"
},

2. Изменения в angular.json

Нам нужно добавить две конфигурации (dev и QA), чтобы можно было выполнять команды, упомянутые в package.json.

Выделены основные конфигурации, но нас интересует окружающая среда. fileReplacements помогает нам управлять файлами в соответствии с нашими конфигурациями.
Здесь, если мы выполним команду npm run build: dev, то файл environment.ts будет заменить на environment.dev.ts, соответственно, будет сгенерирован вывод сборки.

"configurations": {
            "dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "20mb",
                  "maximumError": "30mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
               ]
            },
            "qa": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.qa.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "20mb",
                  "maximumError": "30mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ]
            }
          }
        }
}

3. Изменения или дополнения в файле Среда.

Я добавил несколько свойств (API_IP), чтобы показать вам разницу, вы можете добавить соответствующие переменные среды. Все эти файлы в соответствии с моей конфигурацией находятся в папке сред.

Environment.ts

export const environment = {
  API_IP: 'http://localhost',
  API_PORT: ':5050/',
  Version: 'localhost',
  APP_PORT : '4200/',
  WS_PROTOCOL: 'ws://'
};

Environment.dev.ts

export const environment = {
  API_IP: 'http://dev.mycompany.com',
  API_PORT: ':5001/',
  Version: 'v 10.1203010.23',
  APP_PORT : '4200/',
  WS_PROTOCOL: 'ws://'
};

Environment.qa.ts

export const environment = {
  API_IP: 'https://qa.mycompany.com',
  API_PORT: ':5010/',
  Version: 'v 20.11122020.23',
  APP_PORT : '4201/',
  WS_PROTOCOL: 'ws://'
};

4. Метод USAGE: getProducts, который будет вести себя по-разному в зависимости от сборки.

Файл: app.constants.ts

import { environment } from './../environments/environment';
export const API_IP = environment.API_IP;
export const API_PORT = environment.API_PORT;
export const API_URL = API_IP + API_PORT;
export const NoAccess = "This is not environment specific variable";

Окончательный: product.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { API_URL } from "app/app.constants";
import { Observable } from "rxjs";
@Injectable()
export class ProductService {
   constructor(private _http: HttpClient) { }
   public getProducts() {
      return this._http.get(`${API_URL}Products`);
   }
}

Вы дошли до конца статьи. Если вы считаете, что это было полезно, оставьте комментарий.

Несколько конфигураций среды в Angular

Вопросы по теме