Injecting environment variables into the build?

Ionic Framework ionic-v3
2

->

Build Management

Environment Variables

I followed these steps to add support for environment variables.

Update package.json:

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

Updated tsconfig.json in compilerOptions:

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

Created config/optimization.config.js:

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

module.exports = function () {
  useDefaultConfig.resolve.alias = {
    "@app/env": path.resolve('./src/environments/environment' + (process.env.IONIC_ENV === 'prod' ? '' : '.' + process.env.IONIC_ENV) + '.ts')
  };

  return useDefaultConfig;
};

Created config/webpack.config.js:

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

module.exports = function () {
  useDefaultConfig.resolve.alias = {
    "@app/env": path.resolve('./src/environments/environment' + (process.env.IONIC_ENV === 'prod' ? '' : '.' + process.env.IONIC_ENV) + '.ts')
  };

  return useDefaultConfig;
};

Created src/environments/environment.ts that will be used for the Production environment:

export const ENV = {
  production: true,
  isDebugMode: false
};

Created src/environments/environment.dev.ts that will be used for the Development environment:

export const ENV = {
  production: false,
  isDebugMode: true
};

For any other configuration, just add another file src/environments/environment.[ENV].ts (which will use the CLI’s build flags).

Import your environment variables:

import { ENV } from '@app/env'

Note: Remember to ignore your environment files in your .gitignore

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

Unit Testing and End-to-End (E2E) Testing

Updated tsconfig.ng-cli.json in compilerOptions:

"paths": {
  "@app/env": [
    "environments/environment"
  ]
}

Jasmine

The Jasmine test framework provides everything needed to write basic tests.

Karma

The Karma test runner is ideal for writing and running unit tests while
developing an application. It can be an integral part of the project’s development and continuous integration processes.

Run:

npm test

Protractor

Use protractor to write and run end-to-end (e2e) tests. End-to-end tests explore the application as users experience it.
In e2e testing, one process runs the real application and a second process runs protractor tests that simulate user
behavior and assert that the application respond in the browser as expected.

Run:

ionic serve [--platform=ios]

Then (in a second terminal session):

npm e2e

Test Coverage

Run:

npm test-coverage

In the ./coverage folder open index.html.

Simple Logging Service

->