Environment Variables in Angular
Tags: angular, typescript, configuration
Published: 2020-02-21 12:44:24

---
title: Environment Variables in Angular
published: true
date: 2020-01-24 01:20:27 UTC
tags: angular, typescript, configuration
canonical_url: 
---

Need to use different values depending on the environment you’re in? If you’re building an app that needs to use API host URLs depending on the environment, you may do it easily in Angular using the `environmen.ts` file.

We are considering Angular 8+ apps for this article.

Angular CLI projects already use a production environment variable to enable production mode when in the production environment at `main.ts`:

```
if (environment.production) {
  enableProdMode();
}
```

And you'll also notice that by default in the `src/environment` folder you have an environment file for development and one for production. Let's use this feature to allow us to use different API host URL depending on if we're in development or production mode:

`environment.ts`:

```
export const environment = {
  production: false,
  apiHost: https://api.local.com
}
```

`environment.prod.ts`:

```
export const environment = {
  production: true,
  apiHost: https://api.production-url.com
};
```

And in our `app.component.ts` all we have to do in order to access the variable is the following:

```
import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({ ... })
export class AppComponent {
  apiHost: string = environment.apiHost;
}
```

Now in development mode the apiHost variable resolves to `https://api.local.com` and in production resolves to `https://api.production-url.com`. You may run `ng build --prod` and check.

**Detecting Development Mode**

Angular also provides us with a utility function called `isDevMode` that makes it easy to check if the app is running in dev mode:

```
import { Component, OnInit, isDevMode } from '@angular/core';

@Component({ ... })
export class AppComponent implements OnInit {
  ngOnInit() {
    if (isDevMode()) {
      console.log('Development!');
    } else {
      console.log('Cool. Production!');
    }
  }
}
```

**Adding a Staging Environment**

To add a new environment in Angular projects a new entry to `configuration` property should be added at `angular.json` file. Let's add a staging environment for example. Note that `production` property already exists.

```
"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  },
  "stating": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.stating.ts"
      }
    ]
  }
```

And now we can add a staging environment file and suddenly be and build the project with `ng build --configuration=staging` on our CI (or deploy process) to deploy on staging environment:

`environment.staging.ts`

```
export const environment = {
  production: false,
  apiHost: https://staging.host.com
};
```