Our content is free thanks to ag-Grid

ag-Grid is the industry leading JavaScript datagrid

ag-grid.com

Becoming an Angular Environmentalist

Post Editor

In this article I"ll show you how to leverage Angular application environments to pass configuration settings to your application.

5 min read
post

Becoming an Angular Environmentalist

In this article I"ll show you how to leverage Angular application environments to pass configuration settings to your application.

post
post
5 min read
5 min read

This article assumes you at least have an introductory level of knowledge about Angular and the Angular CLI. If you need a refresher, check out the Angular Tour of Heroes tutorial.

In this article we will:

  1. Explore the default environments the Angular CLI creates.
  2. Modify the environment information.
  3. Explain how to create a new environment with our own configuration.

In this article I show building the examples using an Angular Workspace called ng-configuration. For your convenience I have made it available on GitHub.

What are Angular Application Environments?

An Angular Application Environment is JSON configuration information that tells the build system which files to change when you use ng build and ng serve.

Let’s say you have a back end REST API deployed on a server that provides services to your Angular application. You might have a URL for your own development server, another for the test server, and another for the production server. Using Angular Application Environments you can set up three configurations and specify which to use for ng build and ng serve.

This article is targeted at Angular 6 which really improved both the ease of use and the documentation for Application Environments. The official Angular documentation for environments is here:
https://github.com/angular/angular-cli/wiki/stories-application-environments

Getting Started

Make sure you have installed version 6 of the Angular CLI. Let’s use the Angular CLI to create a workspace called ng-configuration:

ng new ng-configuration

NOTE: To support IE see my article: Angular and Internet Explorer.

We can do a quick test to see the default application running:

cd ng-configuration
ng serve

Then open your browser to: http://localhost:4200

Introducing Configurations

By default the Angular CLI creates a src/environments folder with two environment files in it: environment.ts and environment.prod.ts.

These files are referenced in our angular.json file. Take a look and find the following lines:

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

Notice the fileReplacements array. This tells ng build and ng serve, “If I use the production configuration, replace the contents of the environment.ts file with the contents of the environment.prod.ts file.”

A Simple Environment Example

Let’s try a very simple example that shows how to switch between our default and production configurations and display some configuration data from the proper environment file.

Modify your src\app\app.component.html and src\app\app.component.ts files to look like this:


<h1>
  Environment
</h1>
<pre>{{env | json}}</pre>
import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  env = environment;
}

ng-configuration-app.component.html hosted with ❤ by GitHub

In app.component.ts take a look at lines 2 and 10:

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

This imports the environment file as environment. Then we set our local variable env so our template can access it. Remember that our component template can only access public members on our component so it wouldn’t be able to see environment directly.

Then we display the raw json object in our component’s template like this:
<pre>{{env | json}}</pre>

First we will do ng serve using the default:

ng serve

Open your browser to: http://localhost:4200 and you should see something like this:

Note that this matches what we see in our default src\environments\environment.ts file.

Now let’s try using the prod environment file. To do this we will run ng serve using the production configuration:

ng serve --configuration=production

Now the GUI shows us what is in src\environments\environment.prod.ts.

Because we used the production configuration flag, Angular replaced the contents of our environment.ts file with the contents of our environment.prod.ts file.

Modifying Configuration Information

Take a look again at the src/environment/environment.ts file. Notice that it is TypeScript and that it exports a single object called environment.

export const environment = {
  production: false
};

Let’s update the object to add the name of the environment. Remember that src/environment/environment.ts will be used by default. So modify it to look like this:

export const environment = {
  production: false,
  name: 'default'
};

Now serve the application using the defaults:

ng serve

Now in our component we see the updated configuration information.

Of course, we can add things like service URLs, debug logging flags, etc. or whatever data our Angular application needs.

IMPORTANT: All the data in the environment file will be visible to the client.

NEVER put any sensitive information like passwords or secret keys in your environment files.

Adding Environments

You can also create your own environments. Let’s add a new environment and name it test.

Create a new environment file:
src\environments\environment.test.ts
with the contents:

export const environment = {
  production: false,
  name: 'test'
};

We need to tell angular.json about our new environment file. In the build element there is a configurations object. Add a new object for our test configuration so that it looks like this:

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

Now, this modification only affects ng build. We want to also be able to use it with ng serve. So we need to make one more change.

In the serve element add a reference to our test configuration. It should look like this:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "ng-configuration:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "ng-configuration:build:production"
    },
    "test": {
      "browserTarget": "ng-configuration:build:test"
    }
  }
},

And now we can serve our application using the test environment:

ng serve --configuration=test

Summary

Now we know how to add our own environments.

Use Angular Application Environments when you need a convenient way to manage configuration information for your applications.

Discuss with community

Share

About the author

author_image
Todd Palmer

Computer Scientist, Fujitsu Distinguished Engineer, and Senior Software Engineer http://t-palmer.github.io

author_image

About the author

Todd Palmer

Computer Scientist, Fujitsu Distinguished Engineer, and Senior Software Engineer http://t-palmer.github.io

About the author

author_image
Todd Palmer

Computer Scientist, Fujitsu Distinguished Engineer, and Senior Software Engineer http://t-palmer.github.io

NxAngularCli
NxAngularCli
NxAngularCli

Featured articles

RxJSpost
21 January 20214 min read
RxJS in Angular: Part III

In my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.

RxJSpost
21 January 20214 min read
RxJS in Angular: Part III

In my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.

Read more
RxJSpostRxJS in Angular: Part III

21 January 2021

4 min read

In my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.

Read more
Angularpost
20 January 20216 min read
Angular and SOLID principles

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Angularpost
20 January 20216 min read
Angular and SOLID principles

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Read more
AngularpostAngular and SOLID principles

20 January 2021

6 min read

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Read more
Angularpost
14 January 20216 min read
Demystifying Taiga UI root component: portals pattern in Angular

Just before new year we announced our new Angular UI kit library Taiga UI. If you go through Getting started steps, you will see that you need to wrap your app with the tui-root component. Let's see what it does and explore what portals are and how and why we use them.