How Do I Switch Ionic Environments Without A New Build

Question

What I would like to do is have configurable environments within a single build in ionic. I understand how to build for different environments, but what I would like to do is be able to promote a staging build to production without modifying anything other than the environment variables. Is this possible?

I was thinking maybe a script that runs through the transpiled .js resources and replaces the environment objects that are defined. But that sounds kind of brittle given the minified uglified nature of those files.

Has anyone had to do this or come up with a solution?

Answer 1

Inside your Ionic application src folder, you have a folder called environments.

You can configure your parameters in these files.

environment.ts is used for developement

environment.prod.ts is used for production

When you build the application for production, the environment.prod.ts file replaces the environment.ts file..

Check angular.json -> configurations -> production -> fileReplacements

EDIT -

If you want to use the same binary, without having to build a new binary is have the QA and PROD variables in the same environment file.. Somewhat like this..

export const environment = {
  QA:{
      ... your QA params go here
  },
  PROD:{
      ... your PROD params go here
  }
}

Put this in both environment.ts and environment.prod.ts

Next create a globalConfig.service.ts

import { environment } from "../../environments/environment";
export class GlobalConfigService {
  public globalConfig:any;
  private default = 'QA';
  constructor(){
    //make an api call here to your web server to fetch which 
      configuration is to be used
    //assign your api response to this.default
   
    this.globalConfig = environment[this.default];
  }
}

Then you can import the globalConfigService where you need to access the params and use globalConfig.

Hope this helps.