Ionic - use Angular CLI environments on build

Developing an application in Angular CLI is really fun and fast due to its nature and the features it offers to developers.  One of the great features it has, is the ability to run your code using different variables. Similar to environmental variables that are distinguish per se. But what are the environment variables and what is the relation with the ionic?

If you know what the environment variables are, or if you are impatient and you want just to see how to use the environment variables in an ionic app skipping the reading of the configuration explanation, scroll down to "In nutshell" section 

What are the environment variables

Say that you have an application that posts a form from the client to the server. You local server listens to http://localhost:3000. How can you set different server address on your UAT (User Acceptance Testing) or your Production environment?

In your Angular project exists the directory src/environments which has  the files:

• environment.ts
• environment.prod.ts

If you open the enviroment.prod.ts you will find the following

The values of the variables are different per file. Per environment.

• environment.prod.ts has production:true
• environment.ts has production:false

How can angular distinguish and select the correct environment? Simply, when you build your app with --prod option (ng build --prod) it selects the production environment. If you however build the app without specifying and option (ng build), it selects the default environment.


Let's see how angular manages to do this separation. Be prepared to a deep dive to Angular's configuration.
When we run the angular application with --prod option, we tell angular to use the production configuration which lives in angular.json file.

part of angular.json

This content is the default configuration as it is auto generated

I wont explain what the options such as "optimization", "outputHashing" etc do, but I will focus on "fileReplacements".
The following quote is from angular-cli

When you use your production configuration (via ng build --prod or ng build --configuration=production), the src/environments/environment.ts file will be replaced with src/environments/environment.prod.ts

Notice the 6th line which has "src/environments/environment.prod.ts". This tells angular to use the environment.prod.ts file and in turn this file tells angular to run in production mode. 

Who uses this variable? The src/main.ts file which is the starting point of angular. Let's see the auto generated code

part of main.ts

If the "environment.production" is true, then execute the "enableProdMode()".

The interesting part here is that we don't see an import for environment.prod.ts but environment.ts instead. Nice, right?

This is the chain of how the variables from "environment files" are being used. Similar to production variable, you can set your own variable names. 

As this post is not meant to fully explain how the environments in Angular CLI work, check this for more info

The ionic

According to ionic documentation, if we want to deploy our build to a device we have to write in the CLI the following

If you run this and look closer at the console output, you will notice that it executes a Task from angular.json file. This task is the "ionic-cordova-build"

Console output

This task is in the angular.json file. Let's see what it is all about

The above is the configuration of the ionic-cordova-build task as seen in angular.json file.
​

• The builder is the NPM package which is responsible to take action.
• The options, as written in angular.io, are the default build target options, used when no named alternative configuration is specified.
• The configurations define and name alternative configurations.

From above we perceive that we can set our custom configurations. Let's go and add our options. We will add the configuration with name "dev" beneath production

The dev configuration

We added the "dev" section which sets as handler the app:build:dev. Ohh boy!! We need to adjust more configuration options.  In the same file(angular.json) we have to insert our dev ​configuration on the projects.app.architect.configurations. 

Notice that we are using here the environment.dev.ts (5th line). This means that we have to insert our variables on that file and use them somewhere in our code. 

For the shake of this post, we will add the variable "serverAddress"

environment.dev.ts

And this is what you have to do in order to make use of the serverAddress variable in your code

One more step and we are ready to go! We need to tell angular which configuration to use when building the app. 

The trick here is the option -c. This tells angular to use the dev configuration

In nutshell

1. Create your environment file with the variables you need
2. Use the environment in your code
3. Build the app using the newly created environment using:
   ionic cordova run android --device -c YOUR_ENVIRONMENT_NAME

Conclusion

Using environment variables on your ionic app is very useful when you need to have different values per environment. You might have only two environments, the development and the production. Still, if you want to run your application and make use of the production variables, you will need to use the powerful feature of environment variables powered by angular-cli