Azure Static Web App not using environment.prod.ts value for connection string

Question

I just deployed an Angular App out to Azure as a Static Web App and it is running ok.

But within my app I have a file called "environment.prod.ts" in an environments folder with the following code.

export const environment = {
  production: true,
  baseUrl: "https://fredscarsapi.azurewebsites.net/"
}

I prefix all of my WebAPI Rest call URLs with 'baseUrl'.

So one of my Rest Service calls should look like this:

https://fredscarsapi.azurewebsites.net/vehicles

But instead it is just prefixing the Rest URL with the URL of the static web app like this:

https://orange-mud-02feebe0f.4.azurestaticapps.net/api/vehicles

I did notice going from Angular 13 or 14 to 15 that the environments folder is no longer there. I just manually added it in and everything works locally.

The environment.ts file for local development looks like this:

export const environment = {
   production: false,
   baseUrl: "/"
}

Does anyone know why the production environment baseUrl value is not taking affect? Should it?

Also I added a configuration setting for the Static Web App in Configuration -> Application Settings for baseUrl. But I don't know how to make it take affect (there is no restart button or anything) or if it is doing anything.

And, I read that it is possible to update settings from the Azure CLI.

So I ran this command:

az staticwebapp appsettings set --name FredsCars --setting-names "baseUrl=https://fredscarsapi.azurewebsites.net/"

It seemed to look successful from the command line. But it doesn't seem to affect or fix the application either.

I am at a loss. What do I need to do to set this baseUrl value for the web app?

---

UPDATE 1

Well I modified the environment.ts file to set baseUrl to: https://fredscarsapi.azurewebsites.net/

Now it uses the correct URL to call my Web Service on Azure and comes back with 200 OK.

But now I get this error message in the console window: "Access to XMLHttpRequest at 'https://fredscarsapi.azurewebsites.net/api/vehicleTypes' from origin 'https://orange-mud-02feebe0f.4.azurestaticapps.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

I off to research this and fix. I will be back to document.

---

Update 2

I got the application to work by adding the the URL of the (Angular) Azure Static Web App to the CORS allowed origins of the (Web API) Azure App Service.

But I still don't have the answer to my original question. I will appreciate anyone who can answer:

Why does the Angular Static Web App on Azure use environment.ts in Production mode? It should use environment.prod.ts if I understand correctly.

Answer 1

It turns out that the environment.ts file is not for development, it is for the production (default) environment in Angular. Use environment.development.ts for development.

Also, the environments folder is not there by default in Angular 15. Use the ng generate environments command. And it will create the two files mentioned above.

I document this on my blog here in the "Environment configuration settings" section: https://webdevschool.iimagine-websolutions.com/book-1-chapter-7-mod-10.

It is also documented in the Angular documentation at: https://angular.io/guide/build