Playing with Angular Environments

Every angular developer have come across many environments to configure there app with and before angular 5 it was a nightmare to set those configs that only should be run in a specific environment. Earlier this process was time consuming and hectic none the less. But with every new release angular community has dissolved the complexity of this problem. Now, setting up the environment configs is matter of only 10 mins, thanks to Angular CLI.

I am assuming that you already have angular installed and npm setup on your system. If not then please follow this link -

As of now Angular 9 is the official version. Therefore we will be creating an angular 9 project and I will walk you through how to setup the environment configs in the project. Every application will probably use at least two environments i.e local (aka: development) and production. But larger applications may have several environments like QA, pre-prod, staging, etc.

In our DEMO app, we will have three environments : local (aka development), staging (aka QA) and production.

Go to src/environments and you will see two files there : -

An environment file in angular application is a JSON configuration information file that tells the build system which files to change for which environment, when you use ng build and ng serve.

Imagine you have a back-end REST API deployed on a server that provides services to your Angular app. At local, the service URL will be different from that on staging or that on the production. Then, you might be juggling through the app again and again so that it can be used at different environments. Here, you can just define the URL of the service to each of the app environments files and see the magic happen.

Edit environment.ts file with the following code -

Edit environment.prod.ts file with the following code -

Edit app.component.ts file with following code -

Now hit this command next -

Now, kill the serve command wherever you have run it. And run this now -

or

Do you see the change? How this happened? Do you want to see the actual gears being shifted by angular? Ok! ok! hold your horses!

Open up the angular.json file

Under architect you can see 6 different key-value pairs. Each value defines the config to be used in that specific key and configs can be passed down from keys to keys. Each key also represent the angular CLI command like serve represent the ng serve command, build represents the ng build command and so on. When you hit ng build command in your terminal all the configs defined inside the value of build key will be triggered or you can say will be used.

Open up build key, inside it you will see the configurations key and inside this you will see the fileReplacements array,

Bullseye! You now knows what’s happening! Whenever we are hitting the command to serve the application, the environment.ts file is getting replaced with environment.prod.ts file. But I entered a serve command rather then this build command, so how come this build value is being triggered?

Open up the serve key now, look for configurations

Ok! let’s take a deep breath and recap what we have gather so far!

I hope you have gather some insights with this.

Go to src/environemts directory and create a new file

Edit the file with this -

Now edit the angular.json. Add this configuration to the configurations key, parallel with production key

Similarly add the following code to the serve key configurations

And now we can serve our application using the staging environment

or

Now we have a solid understanding of angular environment files and how to use them to our advantage.

That’s all for now folks. Train has stopped at a station and we will be departing from this station soon with a new problem ahead of us! I hope you have learn something from this blog. If you liked it then please hit the thumbs up and share it with your friends, family or colleagues. Also, please help me improve by giving healthy feedback (below comments). Follow me to get updates on more interesting blogs.

Related posts:

If you have received this message, then you are an important person in my life. Since you know me, you also know that I am passionate about writing, yoga, art and my family. I’m not a public figure…

Diabetes is a chronic condition that affects millions of people worldwide. One of the key aspects of managing diabetes is following a healthy and balanced diet. This means paying close attention to…

i would like to tell you about our own makeup studio and it was owned by my mom and one day Mom and me were discussing about some business ideas regarding some development in marketing and offers…