Angular 8: значение, используемое в компоненте. html не является значением в component.ts (azure служба приложения)

Question

Я получил очень странное поведение в одном из angular приложений. В компоненте. html я хочу отобразить «UAT» и покрасить матовые разметки angular ярко-оранжевым цветом в UAT, в противном случае он должен быть синим и нигде не упоминать о UAT (он же PROD).

По местному, без проблем. при развертывании на azure ничего не имеет смысла Вот немного моего кода.

В моем решении angular я получил этот файл env. json, который выглядит следующим образом

{
"production": false,
"isTestEnvironment": false,
}

В VSTS я создаю приложение один раз, и используйте его для всех развертываний. Поэтому в развертывании UAT я заменяю iSTestingEnvironment на «true» и отправляю его в azure. для производственного развертывания я заменяю production на «true», isTestingEnvironment на «false» и отправляю его.

Этот env. json извлекается с использованием чего-то подобного в app.module.ts

const appInitializer = {
 provide: APP_INITIALIZER,
 useFactory: configFactory,
 deps: [AppConfig],
 multi: true
};

и appInitializer зарегистрирован в разделе провайдеров. И AppConfig для инъекций:

import {Injectable} from '@angular/core';

import {HttpClient} из '@ angular / common / http';

@Injectable()
export class AppConfig {
 public config: any;

 constructor(private http: HttpClient) {}

 public load() {
  return new Promise((resolve, reject) => {
   this.http.get('env.json').subscribe((p: string) => {
    this.config = p;
    resolve(true);
   });
  });
 }
}

В конструкторе моего компонента я начинаю с получения isTestingEnvironment:

this.isTestEnvironment = appConfig.config.isTestEnvironment;

В этот самый момент, когда я console.log значений, это всегда правильно: в UAT это правда. В PROD это неверно. И локально, это наблюдатель, который я вставляю в env. json, даже когда я изменяю значение в горячем режиме, пока работает ng serve.

Когда я смотрю на развернутую среду env. json (используя kudu / powershell), файл правильно сформирован с правильными значениями во всех средах.

Пока все хорошо. Но этот код затем разбивает все в компоненте. html:

    <h5 style="margin: auto;" *ngIf="isTestEnvironment">UAT</h5>

В UAT и PROD он всегда отображается. независимо от того, является ли isTestingEnvrionment истинным или ложным только в предыдущие моменты в журнале консоли. Однако он отлично работает в локальной отладке, используя VS C (1.42.1) и узел (v10.18.1).

На этом этапе Angular говорит true == false, поэтому я с полной потерей.

Я трижды проверил, ни в одной точке решения angular ни одна из переменных isTestingEnvironment не установлена ​​в значение, отличное от env. json. Так что да, я либо полностью упускаю что-то очевидное, либо что-то действительно неправильное в моем коде.

Любая помощь будет принята с благодарностью.

Спасибо.

Answer 1

Итак, я понял это.

TLDR: Это было вызвано задачей выпуска VSTS под названием "Azure Развертывание службы приложений", которая заменяет переменные на строку в параметре "Преобразование файла и подстановка переменных" section.

После того, как я снова посмотрел на развернутый файл, я наконец увидел, что файл:

{
"isTestEnvironment": true,
}

в моих источниках стал:

{
"isTestEnvironment": "true",
}

на azure сервер. Это приводило к каждой проверке, которую мы выполняли для этой якобы фиктивной логической переменной, поскольку непустая строка эквивалентна true в js.

Так что теперь я использую JSON .parse (myVariable), когда я извлечь его из файла env. json. Я мог воспроизвести это на местном уровне и проверить это. Это работает.

Для тех, кто использует тот же выпуск выпуска, что и мы, будьте осторожны, чтобы логическое значение было заменено на строку Я проверил нашу переменную конвейера выпуска, и они НЕ объявляются с кавычками вокруг них; простые простые значения true / false.

В любом случае, спасибо вам, ребята, за возможные обходные пути.