Обнаружение деталей среды при запуске приложения Angular - PullRequest
Новая
       167

Обнаружение деталей среды при запуске приложения Angular

0 голосов
/ 07 августа 2020

У меня есть приложение angular, которое создается и отправляется в Octopus с помощью конвейера сборки VSTS. И из осьминога, развертывание в разных средах.

Кроме того, я не могу напрямую развернуть в UAT, конечно. Итак, сначала разверните в DEV и ту же сборку для UAT и ту же сборку от UAT до PRD.

Итак, моя проблема в том, что у меня есть некоторые значения в моем app.module.ts, которые отличаются в разных средах. Но поскольку везде используется одна и та же сборка, я не могу сделать ее другой. Я думал, что приложение Angular должно понимать, что это за среда (dv1 / dv2 / st1 / st2 / prd), и, таким образом, переключать значения.

Возможно ли это или как я могу этого добиться?

Ответы [ 2 ]

1 голос
/ 07 августа 2020

У меня были такие же требования, как и у вас. На самом деле у меня есть Dev> QA> Stag> Prod , и вся среда будет иметь только одну сборку.

Я добился того, что файл host. js вызван в index. html то есть отвечает, чтобы сообщить мне, в какой среде сейчас работает мое приложение. Этот хост. js вызывается в index. html файле.

Обычно host. js принимает URL и определяет, в какой среде он находится с заданным условием.

host. js

var host = window.location.host;
var env = "";
if (host.indexOf('stag.myapp.com') >= 0) {
  env = "staging";
} else if (host.indexOf('qa.myapp.com') >= 0) {
  env = "qa";
} else if (host.indexOf('dev.myapp.com') >= 0) {
  env = "dev";
} else if (host.indexOf('myapp.com') >= 0) {
  env = "prod";
} else {
  //Not fall in any condition
  env = "dev";
}

index. html

<script type="text/javascript" src="/assets/js/host.js"></script>

Теперь поместите эту переменную env в свой app.component .ts , как показано ниже. 

declare let env;
0 голосов
/ 10 августа 2020

Я хотел бы поделиться другим методом в Azure Devops.

Вы можете попробовать использовать Replace Token Task .

Эта задача может использовать конвейер переменные для замены токена в файле app.module.ts.

Вот пример:

В файле app.module.ts вы можете установить #{variablename}# в качестве значения переменной. 

  providers: [
    { provide: ENVIRONMENTER, useValue: #{environment}# }
  ],

В VSTS Build вы можете установить конкретное значение c.

введите описание изображения здесь

Затем вы можете использовать задачу Replace Token, чтобы заменить значение в app.module.ts.

Например: 

- task: replacetokens@3
  inputs:
    rootDirectory: 'folderpath(contain target file)'
    targetFiles: '**/app.module.ts (file path)'
    encoding: 'auto'
    writeBOM: true
    actionOnMissing: 'warn'
    keepToken: false
    tokenPrefix: '#{'
    tokenSuffix: '}#'
    useLegacyPattern: false
    enableTelemetry: true

В той же сборке вы может изменять переменные в соответствии с требуемой средой. Этот метод также поддерживает одновременное изменение нескольких значений.

...