Multiple environments & client specific app build in Ionic 4
Angular provides two environments, development & production out of the box. But what if you want to set a new environment? Or want to build an app with different configurations for different clients from same code base?
Setting up a new environment in Ionic 4 is pretty simple. Add new environment file, environment.client-1.ts in environments folder. If you want to add staging environment rename file accordingly.

We can set app level settings in this environment file like 👇. These settings can vary according to project requirements.

Now head over to configurations in angular.json file.

Here you will find predefined production configuration. Simply copy & paste the production settings & rename the configuration as client-1.
In fileReplacements array, replace the existing environment.ts file with newly created environment.client-1.ts file.

Add client-1 configuration in serve section.

Similarly, add client-1 configuartion in ionic-cordova-build (for building native app) and ionic-cordova-serve (for running on device or emulator).


You could add multiple environments using this steps and set different configurations for different clients. But as more number of environments grow it might get little difficult to manage.
Now to build app you could pass environment name:
ionic cordova build android - -configuration=client-1
To serve app in the browser:
ionic serve - -configuration=client-1
