Angular One-Time Build in Multiple Environment

Hi CelSius, — that’s how i call my pal 😆

Today i’m going to share about how to build-once in your Angular project, in Angular-way

So many articles and blogs has been explaining about using configurations by creating a config.json file and save it in your assests folder, then you fetch it through service, and so on.

But, i find it so messy since i have to do or change a lot of part of my codes.

From there, i find a foxy way to achive this by adding a javascript files and save all your environment configurations to window object and then fetch it back again in your environment.ts files.

Yeah, it’s not wrong, but again…

I find it that, we are using Angular, why we do common thing like that?

So, from that thought, i find how to do that in Angular-way.

So the main idea is, you can add as much as environment as you pleased, without doing anything with your existing components.

First, what you need is config.json file.

{
  "environment": "dev"
}

Here is the only file you will specify your environment you used.

Second thing you need to have is your environment configuration!

In this case, we have dev and prod environment.

So, inside your src/environments folder, you can add (if it is not exist) or update (if it is exist) your environment.dev.ts and environment.prod.ts file.

// environment.dev.ts
export const environment = {
  production: false,
  api: 'https://example.com/api/dev',
  payment: 'https://example.com/payment/dev'
};

and

// environment.prod.ts
export const environment = {
  production: true,
  api: 'https://example.com/api/prod',
  payment: 'https://example.com/payment/prod'
};

The next thing is update your src/environments/environment.ts file :

import {environment as prod} from './environment.prod';
import {environment as dev} from './environment.dev';

let config: any;

const req = new XMLHttpRequest();
req.open('GET', 'config.json', false);
req.onload = () => {
  config = JSON.parse(req.responseText.toString());
};
req.send(null);

let environment: any = {};
if (config) {
  switch (config.environment) {
    case 'prod':
      environment = prod;
      break;
    default:
      environment = dev;
      break;
  }
}

export {environment};

After all steps above has been done, then we need to look-up what is missing.

When we try to run ng serve , notice that your environment still not working even after we set that.

Woops~~

That is because your Angular still cannot read your config.json file!

So, what we need is just update your angular.json file, to tell your Angular project to read the config.json file.

Add this line of code under your assets:

{
   "glob": "config.json",
   "input": "src/environments",
   "output": "."
}

So the structure will be like this :

{
  •••
  "projects": {
    "angular-build-once": {
      •••
      "architect": {
        "build": {
          •••
          "options": {
            •••
            "assets": [
              •••
              {
                "glob": "config.json",
                "input": "src/environments",
                "output": "."
              }
            ],
            •••
          },
          •••
        },
        •••
        "test": {
          •••
          "options": {
            •••
            "assets": [
              •••
              {
                "glob": "config.json",
                "input": "src/environments",
                "output": "."
              }
            ]
          }
        },
        •••
      }
    },
    
    •••
  },
  •••
}

But, don’t forget to remove this line of code :

Then re-run ng serve , and then it’s working!!!

Now, let’s try with the ng build.

After the build process has been done, the generated dist folder will be looks like this :

So, the build result can be used directly to your all of your server (in this case, we use dev and prod .

What we need to change is only the config.json file.

After you have build to dev server, change the environment value to :

{
  "environment": "dev"
}

The same thing also goes to prod server, change the environment value to :

{
  "environment": "prod"
}

And, that’s it! It’s really that simple.

Then you don’t have to touch your whole components.

Adding another environment?

You wish to have another environment (let’s say : xyz environment)

It’s super easy!!!!!

Just adding new file src/environments/environment.xyz.ts , then add all of your environment’s variable.

And then register it to src/environments/environment.ts , and just register it like we register the dev and prod environment.

Tadaaa~~

Summary

If you don’t like the long explanation, just go directly to the Demo for Angular Build-once on Github and check on the commits history.

So, from the explanation of my whole idea, what we really do are only this :

And, that’s it!