I have a single angular application deployed two two separate azure web-apps. These apps get their environment variables from src/assets/config.json. This file is loaded on startup using this method:

private loadConfiguration() {
    this.http.get<AppConfiguration>('assets/config.json').subscribe(data => {
      this.configration = data;
      this.$configuration.next(this.configration);
    });
  }

In Env.A, the config file loads fine, and the app works as expected

In Env.B, the config file fails to load. The network traffic shows a successful response when calling loadConfiguration(), and the response contains the expected contents of config.json, although the http.get() call is returning a null.

I have confirmed that both applications have deployed the same artifact, and that the configuration of the app services are the same. I have confirmed that the config file is valid json, and I have confirmed that the property names are the same in both environments

I have a single angular application deployed two two separate azure web-apps. These apps get their environment variables from src/assets/config.json. This file is loaded on startup using this method:

private loadConfiguration() {
    this.http.get<AppConfiguration>('assets/config.json').subscribe(data => {
      this.configration = data;
      this.$configuration.next(this.configration);
    });
  }

In Env.A, the config file loads fine, and the app works as expected

In Env.B, the config file fails to load. The network traffic shows a successful response when calling loadConfiguration(), and the response contains the expected contents of config.json, although the http.get() call is returning a null.

I have confirmed that both applications have deployed the same artifact, and that the configuration of the app services are the same. I have confirmed that the config file is valid json, and I have confirmed that the property names are the same in both environments

• angular
• azure

• Check to make sure that the response header is JSON – Olivier Commented Feb 17 at 19:30
• @Chris Phillips Do you see any errors in the Console tab in the browser – Sirra Sneha Commented Feb 18 at 5:03

1 Answer 1

although the http.get() call is returning a null.

The issue you're facing might be due to Azure Web App Configuration Differences,

• Check the CORS settings in Env.B to ensure the Angular app can access the config.json file.
• Check the Configuration tab for both apps in the Azure Portal and make sure the app settings are same, especially the ones related to your app’s configuration (like environment variables).
• Make sure the config.json file is correctly deployed to Env.B, as deployment issues can sometimes cause files to be missed or not updated.
• Compare the build configurations and check if any differences exist between the two environments.

I have created a sample Angular application, successfully deployed it to two Azure Web Apps, and can load the configuration file in both apps without any issues.

This is the method I've used for loading configuration from config.json

private  loadConfiguration():  void {
console.log('Making HTTP request to load configuration...');
this.http.get<AppConfiguration>('assets/config.json').subscribe(
(data:  AppConfiguration) => {
console.log('Configuration data:', data);
this.$configuration.next(data);
},
(error:  HttpErrorResponse) => {
console.error('Error loading config:', error); }
);
}

Complete appponent.ts:

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';  
import { HttpClientModule } from '@angular/common/http';  
import { BehaviorSubject } from 'rxjs';
import { CommonModule } from '@angular/common';  
import { AppConfiguration } from './app-configuration.model';

@Component({
  selector: 'app-root',
  standalone: true,  
  imports: [CommonModule, HttpClientModule], 
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.css']
})
export class AppComponent implements OnInit {
  title = 'config-loader-app';
  private $configuration = new BehaviorSubject<AppConfiguration | null>(null);
  public configuration$ = this.$configuration.asObservable();

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.loadConfiguration();
  }

  private loadConfiguration(): void {
    console.log('Making HTTP request to load configuration...');
    this.http.get<AppConfiguration>('assets/config.json').subscribe(
      (data: AppConfiguration) => {
        console.log('Configuration data:', data); 
        this.$configuration.next(data);
      },
      (error: HttpErrorResponse) => {
        console.error('Error loading config:', error); 
      }
    );
  }    
}

I've successfully deployed the application to two Azure Web Apps.

I've configured the below startup command in configuration section of Azure app service.

pm2 serve /home/site/wwwroot/dist/<Web-App-Name> --no-daemon --spa

Now I can load the configuration file in both apps successfully.

app1:

app2: