Ionic Environment Variables

With this configuration, you can import environment variables anywhere, even in your app.module.ts. Also supports any number of custom environments (prod, staging, dev, etc.) This project uses the @ionic/app-script package. I recommend updating/installing this package before starting.

Add the following to your package.json:

"config": {
  "ionic_webpack": "./config/webpack.config.js"
}

Add the following to your tsconfig.json in compilerOptions:

"baseUrl": "./src",
"paths": {
  "@app/env": [
    "environments/environment"
  ]
}

Create a file in your base directory config/webpack.config.js and paste the following:

var chalk = require("chalk");
var fs = require('fs');
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

var env = process.env.IONIC_ENV;

useDefaultConfig.prod.resolve.alias = {
  "@app/env": path.resolve(environmentPath('prod'))
};

useDefaultConfig.dev.resolve.alias = {
  "@app/env": path.resolve(environmentPath('dev'))
};

if (env !== 'prod' && env !== 'dev') {
  // Default to dev config
  useDefaultConfig[env] = useDefaultConfig.dev;
  useDefaultConfig[env].resolve.alias = {
    "@app/env": path.resolve(environmentPath(env))
  };
}

function environmentPath(env) {
  var filePath = './src/environments/environment' + (env === 'prod' ? '' : '.' + env) + '.ts';
  if (!fs.existsSync(filePath)) {
    console.log(chalk.red('\n' + filePath + ' does not exist!'));
  } else {
    return filePath;
  }
}

module.exports = function () {
  return useDefaultConfig;
};

Create a default file src/environments/environment.ts which will be used for your PRODUCTION environment:

export const ENV = {
  mode: 'Production'
}

Create a default file src/environments/environment.dev.ts which will be used for your development environment:

export const ENV = {
  mode: 'Development'
}

You can then import your environment variables anywhere!

import { ENV } from '@app/env'

NOTE Remember to ignore your files in your .gitignore

# Envrionment Variables
**/environment.*
!**/environment.model.ts

To test production builds: ionic build --prod then open the www/index.html file in your browser.

If more than prod and dev environments are wanted

1. Change your webpack.config.js IONIC_ENV variable to be something else. For example:

var env = process.env.MY_ENV;

2. Add to your package.json another run script and name it whatever you would like

"serve:testing": "MY_ENV=testing ionic-app-scripts serve"

3. Create your testing file src/environments/environment.testing.ts. This should be whatever you set your MY_ENV to.
4. Finally, run the script by using the name you used for your script in package.json

$ npm run serve:testing

NOTE: When running with a custom variable, production builds still need --prod flag