Configure Angular Environment Build Once Deploy Anywhere

Published in

Mighty ghost hack

6 min readSep 2, 2020

All right Guys! In this article, I am going to explain to you an amazing technique that is most commonly know as build once deploy anywhere so before proceed further I would love to explain to you the real-world scenario why we need such a technique in our application instead of using the default environment files. 🤔

Also, if you landing on this page so I guess you also run into the same problem. if not then before trying this solution you at least know why we implement this technique on our project bcoz this technique is not necessary to implement in all angular projects.

Actual Scenario 😵

In my last projects, I used to build the angular project every time by keeping all configuration of the project in the environment file. so most of the time if I have to deliver the project to another client I need to change the credential as well bcoz we cannot give one credential to every client. whenever a requirement is a change we have to build the whole project base of change credential. so how long you will going to build the same project again ? and it might cause some other issue on the production level as well.

so I would love to offer a solution to this problem 🙂

Now you know the problem statement so I will walk you through the different steps.

First, read the below Sentence which is the Golden rule of programming

If its Works Don’t Touch it!!!

Now you might be asking why I put these rules in the middle of the post bcoz I wanted you should try this approach first on sample code. Once it works in sample code then you can try it on your live project.

So let’s begin by creating a new angular project.

Step 1 Create A Project & Configure environment

ng new env-demo

A new project is created. simply run the project by the following command.

ng serve -o

Once you run the serve command you will land into this page which contains the default template of Angular Framework.

so first and foremost for the demonstration purpose, I will make the project name dynamically for that I will keep the project name-value under the environment files. so make it dynamically by adding it into environment files.

You can see this in the below screenshot. I added the project name on both production and non-production files.

now let’s make the changes in app components and provide environment variable value as below shown in the code snippet.

And lastly, save the project and look into the HTML page and check project name is assign dynamically or not. if it is working then our main task to change the project name from production build without rebuilding the project. so I assume you done the above steps.

Step 2 Create an External env.js file and link

now we have to create an external env.js file just inside the src directory. and add the following few lines of code. also, make sure to keep the variable name which you want but the prefix must be the same which is windows.__env.VARIBALE_NAME just what I have shown below.

(function (window) {   window.__env = window.__env || {};   window.__env.projectName = "External_ENV";}(this));

now we have to load this js file. while index.html is rendered so add the below script tag inside of index.html

<html lang="en">

  <head>
    <!-- Load environment variables -->
    <script src="env.js"></script>
  </head>

  <body>  </body>  

</html>

now we have to add this file path in the angular.json file. bcoz By default, JavaScript files such as env.js are not copied to the output directory when we build our application. so in order to copy the file into the output directory, we must include the env.js path into the angular.json.

{
  "projects": {
    "app-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/env.js" // <== Add env.js here
            ]
          }
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }
      }
    }
  }
}

so far we create a new env.js file and linked it with the angular.json file and index.html successfully. so before we move further we have to verify after building its appear in our output directory or not by running the below command.

ng build --prod

Below snippet, you can see env.js appear on output directory

so far we completed step 2 as well.

Step 3 Create Environment Service & Its Provider

Now we have to create an env service file and its provider also we need to register the provider with the angular module.ts file.

In the first place, we have to create an env service file.

so In angular, we can achieve this by a single command.

also, I will create a service under the app/service directory bcoz it considers as a best practice to keep it file separately. so simply enter the following command.

ng g s env

Once you entered the above command. you will see two main files is created. but Angular CLI does not come with a recipe to create a provider, so let’s create the env.service.provider.ts file manually in the same directory.

Now we need to add some piece of code inside a created provider file.

Below you will find its code simply copy and past it into your provider class file.

Now we have to add the same variable into the created env service and it necessary to keep the variable name the same.

Congrats we finish the main steps 😀

Step 3 Finial Steps Registration and importing

here we will register the provider in the angular module.ts file and import the env service file in the app component file. you can import wherever is required. in my case, I just use this in-app environment only for demonstration.

First register provider in the angular module file.

In the below snippet you can see clearly.

Now import env service under the app component file and replace the environment files variable with the service variable as shown in the below snippet.

one side note its better to make env service instance with name environment bcoz if you use an environment variable in multiple places so it becomes hard to change its name with another variable.

That’s it we’re done 🙂

Now you can verify it by building the project.

I am also sharing its GitHub repo so you guys can verify it. https://github.com/mayurkadampro/Angular-External-Env.git

To understand in a much better way here is the video link