Ionic 3.9.2 Environment Variables

environment.interface.ts

export interface Environment {
	DEBUG : boolean;
	API_URL : string;
	WS_URL : string;
	BASE_URL : string;
}

environment.ts

import { Environment } from './environment.interface';

export const ENV: Environment = {
	DEBUG : true,
	WS_URL : 'ws://10.1.1.1/',
	API_URL : 'http://10.1.1.1/api/'
};

optimization.config.js

var path = require('path');
var defaultConfig = require('@ionic/app-scripts/config/optimization.config.js');

const DEV_ENV  = './src/environments/environment.ts';
const PROD_ENV = './src/environments/environment.prod.ts';

const devAlias = {
	"@app/env" : path.resolve(DEV_ENV)
};
const prodAlias = {
	"@app/env" : path.resolve(PROD_ENV)
};

module.exports = function () {
	defaultConfig.dev.resolve.alias  = devAlias;
	defaultConfig.prod.resolve.alias = prodAlias;

	return defaultConfig;
};

package.json

  "config": {
    "ionic_aot_write_to_disk": true,
    "ionic_optimization": "./config/optimization.config.js",
    "ionic_webpack": "./config/webpack.config.js"
  }

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "baseUrl" : "./src",
    "paths" : {
      "@app/env" : [
        "environments/environment"
      ]
    }
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

webpack.config.js

var path = require('path');
var defaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

const DEV_ENV  = './src/environments/environment.ts';
const PROD_ENV = './src/environments/environment.prod.ts';

const devAlias = {
	"@app/env" : path.resolve(DEV_ENV)
};
const prodAlias = {
	"@app/env" : path.resolve(PROD_ENV)
};

module.exports = function () {
	defaultConfig.dev.resolve.alias  = devAlias;
	defaultConfig.prod.resolve.alias = prodAlias;

	return defaultConfig;
};