Using environment specific variables in Angular

Using environment-specific variables in angular, the right way!

We have seen environment variables being used in angular projects. They are used to in projects with different build configurations for sites hosted in different environments.

Suppose your project have two different environments

1. Production
2. Staging

and that you have different api base urls for different environments.

Lets see how you can use environment variables to achieve that.

Setup

Angular 15+ by default has no environments, add them we use the command

ng generate environments

This will create two files

1. src/environments/environment.ts (production)
2. src/environments/environment.development.ts

Now, you need to manually create a staging environment.staging.ts file by copying the environment.ts file. Then we have this setup

└── src
    └── app
        ├── app.component.html
        └── app.component.ts
    └── environments
        ├── environment.development.ts
        ├── environment.staging.ts
        └── environment.ts
    └── services
        ├── api.service.ts
        └── api.service.spec.ts

Now add the api urls to your environment files:

environment.ts

export const environment = {
  production: false,
  apiUrl: 'http://my-prod-api-url'
};

environment.development.ts

export const environment = {
  production: true,
  apiUrl: 'http://my-local-api-url'
};

environment.staging.ts

export const environment = {
  production: false,
  apiUrl: 'http://my-staging-api-url'
};

Configuration for different environments

The ng generate environments command will automatically add these changes to the angular.json file.

"configurations": {
  "development": {
    // ...
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.development.ts"
      }
    ]
  }
}

You will have to manually add the configurations:staging manually to the file like this.

"configurations": {
  "staging": {
    // use the other production config here
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ]
  }
}

Recommendation is to use the same configuration of production for staging.

Using the environment variable in code

We will use that environment variable to get the environment.apiUrl for the service.

api.service.ts

import { environment } from '../environments/environment';

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

@Injectable({
  providedIn: 'root',
})
export class ProductService {
  apiUrl = environment.apiUrl;

  constructor() { }

  getProducts() : Observable<Products> {
    const url = this.apiUrl + '/api/products';
    return this.http.get<Products>(url);
  }

}

Now, we are all set to build according to different environments

ng build // production - default
ng build --configuration=staging // staging

That’s all to it. Happy coding!