Блог

В настоящее время я работаю над стратегией максимально простой обработки нескольких сред в Angular CLI.

Для этого я придерживаюсь такого подхода:

Моя цель — иметь базовые URL-адреса для разных конечных точек REST только один раз, и все среды должны иметь их (расширяющиеся или что-то в этом роде).

Каков наилучший способ реализовать это?

Вы можете использовать несколько файлов среды, вот как вы можете это сделать, и при сборке вы должны указать конфигурацию (примеры: prod, test, uat)

• вы должны добавить все свои конфигурации в файл angular.json

   "configurations": {
      "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"
          }
        ]
      },
      "develop": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.develop.ts"
          }
        ]
      },
      "release": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.release.ts"
          }
        ]
      },
      "uat": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.uat.ts"
          }
        ]
      },
    }
    

добавьте свои URL-адреса для каждого файла, и когда вы создаете или обслуживаете свое приложение локально, вы должны указать конфигурацию

 ng build --configuration=uat // for uat env

ng serve --configuration=uat 
  

или

 ng build --prod // for production env
  

импортируйте его таким образом, и он выберет правильный вариант на основе выбранной конфигурации

 import { environment } from 'src/environments/environment';
  

Если вы используете webpack, вы можете создать файл environment.ts со всеми специфичными для среды данными в качестве свойств объекта….

     {
        environment: 'dev',
        baseurl: 'http://myBaseUrl'
    }
  

создайте отдельный файл для каждой среды (prod, qa и т. Д.) С одним и тем же объектом и свойствами. импортируйте обычный файл environment.ts, когда вам нужна информация о среде….

Затем в каждой конфигурации webpack используйте NormalModuleReplacementPlugin …

     new webpack.NormalModuleReplacementPlugin(/./environment./, './environment.qa.ts')
  

Вы в основном указываете webpack везде, где я импортирую среду, заменяя ее на среду с environment.qa (или в любой другой версии)