Managing different environment configurations for a modern Angular web application can be daunting. However, with the help of Azure DevOps Release Pipelines, you can streamline this process to ensure efficient and hassle-free environment management.

This blog post will explore how to request an Angular environment as a JSON file and keep the configuration in Azure variables to set it at the Release Pipeline stage. With this approach, we can easily manage multiple environments and ensure our application is deployed with the correct configurations for each environment.

Let’s dive in!

Configure Angular Application with a Base Environment

Before we configure an Angular app, let’s first create a new one. We will call it “env-management”.

ng new env-management

Next, we should add an environment.json file, which the pipeline task will transform during release. We can put this file in the “assets/config” folder or any other folder that works better for you. The contents of this file should include any configuration you want to vary by environment, such as the API’s base URL, which we will set by the Azure Release Pipeline.

{
  "apiBaseUrl": "$apiBaseUrl",
}

In the next step, we should create an APP_CONFIG Injection Token to use in our app. This token will allow us to inject the configuration into our application.

export interface IAppConfig {
  apiBaseUrl: string;
}

export const APP_CONFIG: InjectionToken<IAppConfig> = 
    new InjectionToken<IAppConfig>('APP_CONFIG');

Fetch Environment

In our application’s main.ts file, we need to wrap the application bootstrap with a fetch request to retrieve the environment configuration file. The fetch request uses the environment name and build number to determine which configuration file to retrieve. Once the fetch request is complete, we can bootstrap our application with the retrieved configuration.

fetch(`/assets/config/${isDevMode() ? `environment.${buildVariables.environmentName}` : 'environment'}.json?v=${buildVariables.buildNumber.replace(/\D/g, '')}`)
  .then((response) => response.json())
  .then((config: IAppConfig) => {
    bootstrapApplication(AppComponent, {
      // App configuration
      providers: [
        // App providers here
        {
          provide: APP_CONFIG,
          useValue: {
            ...config,
            portalType,
          },
        },
      ],
  })
});

Disable Cache for the Main File

In our setup, we’re using Azure Static Web Apps, which will cache heavily by default, so we should turn off caching for our environment file. We can do this by creating a staticwebapp.config.json file (if you don’t have one already) and adding the following code to “routes”:

{
  "route": "/assets/config/environment.json",
  "headers": {
    "Cache-Control": "no-cache" // or "no-store"
  }
},

If you host your Angular application using some other technology, you can use another approach that works for your hosting setup. For example, you can add a timestamp to the environment file URL to ensure it’s always fresh.

fetch(`/assets/config/${isDevMode() ? `environment.${buildVariables.environmentName}` : 'environment'}.json?v=${new Date().toISOString()}`)

Add Environment Variables in Azure

To create variables for different environments, we need to go to Azure DevOps -> Pipelines -> Library and create a set of variables. Here, we can specify the API base URL for our environment.

Create Azure Release Pipeline

For the final step, we need to set up our release pipeline. We can do this by going to Releases and clicking “+ New” -> “New release pipeline” (or edit the existing one).

NOTE: You can use Azure CLI for this purpose if you prefer using terminal instead of UI.

Then we add the Files Transform task, which will transform our environment configuration file during release. We set the env file folder path in the “Package or folder” field and select JSON in “File format” — set environment.json as “Target Files”.

NOTE: Remember to link development environment variables. Go to the “Variables” -> Variable groups -> Link variable group and select the required variable groups.

Add other required tasks to deploy your application and hit the “Save” button. That’s it. Now, each time you run the release pipeline, it will replace values in the environment.json file with ones you added as Variables of the pipeline.

Conclusion

Managing different environment configurations for an Angular application can be complex and tedious, especially when you must keep environment configuration in TypeScript files, which requires the application to rebuild each time you change it. Instead, we can use Azure DevOps release pipelines to easily manage multiple environments and make changes to their configuration without the need to rebuild the application by requesting an Angular environment as a JSON file and saving the configuration in Azure variables.