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.

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