Encountering a peculiar behavior in one of my Angular applications. In the component.html file, I aim to display "UAT" and style the Angular mat elements with a vibrant orange color when in UAT mode, while displaying them in blue without any mention of UAT (aka PROD) otherwise.
Everything seems fine locally, but once deployed to Azure, things get confusing. Here's an excerpt from my code:
Within my Angular solution, there is an env.json file structured as follows:
{
"production": false,
"isTestEnvironment": false,
}
In VSTS, after building the app once, it is utilized for all deployments. For UAT deployment, "isTestingEnvironment" is set to "true" before shipping it off to Azure. Similarly, for production deployment, "production" is set to "true" and "isTestingEnvironment" to "false" before shipment.
To extract this env.json, something like this is used in app.module.ts:
const appInitializer = {
provide: APP_INITIALIZER,
useFactory: configFactory,
deps: [AppConfig],
multi: true
};
The appInitializer is then registered in the providers section, and the AppConfig injectable looks like:
import {Injectable} from '@angular/core';
import {HttpClient} from '@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);
});
});
}
}
In the component's constructor, the isTestingEnvironment is retrieved first:
this.isTestEnvironment = appConfig.config.isTestEnvironment;
Upon console.log, the values appear correct - true for UAT, false for PROD, and matching the value in the local environment even during hot changes while ng serve is running.
Despite the well-formed env.json file being deployed (as confirmed using kudu/powershell), the following line in component.html causes issues:
<h5 style="margin: auto;" *ngIf="isTestEnvironment">UAT</h5>
Regardless of whether isTestingEnvironment is true or false moments earlier according to the console log, "UAT" always appears in UAT and PROD modes. Strangely, this works perfectly during local debugging sessions using Visual Studio Code (1.42.1) and Node.js (v10.18.1).
At this juncture, Angular seems to equate true with false, leaving me utterly perplexed.
I've verified multiple times that the variable isTestingEnvironment is only set in the env.json file within the Angular solution. It seems like I'm either overlooking something glaringly obvious or there's a serious flaw in my code.
Any assistance on this matter would be immensely appreciated.
Thank you.