Лучший способ обработки сред в Angular с Typescript - PullRequest
Новая
       12

Лучший способ обработки сред в Angular с Typescript

1 голос
/ 12 апреля 2019

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

Для этого я придерживаюсь следующего подхода: enter image description here

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

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

Ответы [ 2 ]

1 голос
/ 12 апреля 2019

Вы можете использовать несколько файлов среды, вот как вы можете это сделать, и при сборке вы должны указать конфигурацию (примеры: 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';
0 голосов
/ 12 апреля 2019

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

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

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

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

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

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

...