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;
};

Hello there, cool gist, thank you very much.
I did not figure out the first file environment.ts, it is importing Environment from ./environment.interface however, at which moment environment.interface was created?

Updated gist to include the interface. Thanks for the comment.

Thanks for this.

I don't see any documentation wrt ionic_optimization. What purpose is it serving here?

Hi, after I set up, how to switch environment in with ionic cli?

I have tried ionic serve --prod and ionic serve --env=prod.
but the import env still get dev variables.

EDIT:
my bad, found out ionic serve will always compile with dev environments.
it worked when I run with ionic cordova build browser --prod.

thanks

@jskrepnek I did some digging and looks like ionic_optimization might be deprecated.

@kuccilim that is one way to run a prod build. I typically just run npm run build --prod to do a production build for just web assets.

Is it possible to identify the platform in webpack.config.js?

I have implemented files as you mentioned above. when I run "ionic cordova build android --env=dev" or "ionic cordova build android --prod --env=dev" or "ionic cordova build android --prod --env=prod" or "ionic cordova build android --prod", all the time ENV.mode returning DEV.
I imported like this "import { ENV } from '../../environments/environment';" into my home page.

if I import like this "**import { ENV } from '@app/env'; **", IONIC CORDOVA BUILD ANDROID --env=dev is giving me below error, app-scripts are already installed.

Could you please advise me