Angular Environment Configuration (How-to Guide)

Let's talk about environment configuration in Angular.

Usually we build Angular applications locally, on our local develop machine.

And of course, we have to deploy our Angular app to a server.

Often in this process we have different environments - meaning we might have a production environment and perhaps a staging one.

These environments require different settings or variables.

We're going to learn how to accomplish this so let's get started.

Let's start with an example

Let's say we have a simple Angular service that calls an API.

We will have a simple get method that calls our local API.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ApiService {
  private endpoint = 'users';
  private domain: string | undefined;

  constructor(private httpClient: HttpClient) {
    this.domain = 'http://localhost:300';
  }

  get() {
    return this.httpClient.get(`${this.domain}${this.endpoint}`);
  }
}

But wait a minute. What if I want a different setting for a different environment.

I already know for a fact that in the production environment we won't be using http://localhost:3000.

That's where we can use Angular environments to configure our app for different environments.

The Angular environment files can be found inside the src/environments/ folder.

In older Angular apps this was automatically generated for you. So if you can find the environments folder in your project you can use the Angular CLI to generate an environment file.

We'll generate two different environments for our app - a dev and production environment with this simple command.

👇 👇 👇

ng g environment

This will generate two new files:

• src/environments/environment.ts
• src/environments/environment.development.ts

Now, we're going to add our API domain to both environment files.

For the development environment it will look something like this.

export const environment = {
    domain: 'http://localhost:3000',
    production: false,
};

And our production environment file will look like this.

export const environment = {
    domain: 'https://api.mysuperapp.io',
    production: true,
};

Now let's go to the API service and instead of using a hard-coded value I'm going to pick it from environment.

Like this.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root',
})
export class ApiService {
  private endpoint = 'users';
  private domain: string | undefined;

  constructor(private httpClient: HttpClient) {
    this.domain = environment.domain;
  }

  get() {
    return this.httpClient.get(`${this.domain}${this.endpoint}`);
  }
}

And that is how to use environment files in Angular and configure your environment.

But how does this really work?

The angular.json file

The configuration is all kept inside the angular.json file. This is where different configurations are kept.

You will find a configuration section inside the angular.json file.

For example, for my app, we have the development configuration that swaps out the config files.

"development": {
    "optimization": false,
    "extractLicenses": false,
    "sourceMap": true,
    "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.development.ts"
        }
    ]
}

And we also have a default configuration, in my case, like this.

"defaultConfiguration": "production"

Which means that a default ng build will build a version of the app using the environment.ts file.

And that, my ng-friend, is how to manage environment configuration in Angular.

Till next time, 👋 👋

Daniel Kreider