Ionic-app-scripts: environment variables

[kodeine]

How to define env variables globally? in src/app/main.dev.ts and src/app/main.prod.ts?

[danbucholtz]

Hi @kodeine,

Right now I don't think there is a good way to do it. This is something we should address in the coming weeks.

Thanks,
Dan

[harshabonthu]

I was trying to get the same functionality i.e environment based global variables similar to Angular cli. I am doing this right now as below.

Create new file -> config/webpack.config.js

const webpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config');
const webpack = require('webpack');
const argv = require('yargs').argv;


/**
 * Plugin: DefinePlugin
 * Description: Replace environment.ts file based on env.
 * Useful for having builds with global constants based on env.
 *
 * Environment helpers
 *
 * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 */

webpackConfig.plugins.push(
    new webpack.NormalModuleReplacementPlugin(/\.\.\/\environments\/environment/,
        function(result) {
            result.request = result.request.replace(/\.\.\/\environments\/environment/, `../environments/environment.${argv.env || 'dev'}.ts`);
        }
    )
);

Add this config to package.json

    "ionic_webpack": "./config/webpack.config.js",

Define global environment variables in src/environments folder
EG:
src/environments/environment.ts

export const environment = {
  production: true,  // this value can be anything - will be replaced during build
  BASE_URL: 'https://rest-prod.website.com', // this value can be anything - will be replaced during build
};

src/environments/environment.prod.ts

export const environment = {
  production: true,
  BASE_URL: 'https://rest-prod.website.com',
};

src/environments/environment.dev.ts

export const environment = {
  production: false,
  BASE_URL: 'https://rest-dev.website.com',
};

In your code you import as below and use environment.BASE_URL

import { environment } from '../environments/environment';

And then run

ionic-app-scripts build --env=dev | prod | qa

[kodeine]

@danbucholtz please update this when the env variables are ready to be used. Thanks for everything!

[danbucholtz]

This should be landing soon. We aren't going to do it exactly this way but we'll do something similar.

Thanks,
Dan

[kwv]

I've had to turn off ngc/AoT for the approach described by @harshabonthu

"build": "npm version prepatch && ionic-app-scripts build --env=qa --dev",

Otherwise I get a runtime exception in Chrome Inspector, that I need a loader:

main.js:14 Uncaught Error: Module parse failed: C:\Users\me\projects\project\.tmp\environments\environment.qa.ts Unexpected token (1:24)
You may need an appropriate loader to handle this file type.
| export const environment: any = {
|   production: false,
|   name: 'qa',

Perhaps by the time webpack runs environments/environment is not available?

[harshabonthu]

@kwv I've uploaded sample project here -> https://github.com/harshabonthu/ionic2-env-sample/commit/08dae6ec86a30d932cdccb3ccd2df8be1b869220

Running npm run ionic -- build --env=prod would generate build with prod variables and ngc.

[sean-hill]

@danbucholtz I'm curious when "soon" is 😄 Any updates with as of late?

[danbucholtz]

@sean-hill,

This is a lower priority for us right now. I put in a PR for this but the team rejected my impl so we are going back to the drawing board about this.

We will eventually implement this but we are very focused on better dead code elimination and tree shaking.

Thanks,
Dan

[rolandjitsu]

@danbucholtz While this is low priority for you, for many of us it's very important to have a way of switching configuration based on which env we are using.

I've literally looked through all PR's in this repo and I could not find any implementation of a possible solution, but #204, which with Webpack it's not working for production builds with AOT. And Rollup cannot be used if I also use @ionic/cloud-angular because it's currently failing for non-prod builds.

So it is becoming a little frustrating. It would be nice to finally see some progress on this matter. Or at least some design document that we could use to make an implementation ourselves.

[riltsken]

While not something official this is what we currently do for our project. I don't know how this interacts with ionic cloud necessarily since we aren't using that yet.

We have a scripts dir which wraps the ionic-app-scripts build/watch functions and a template which we inject anytime we run it where we can place env variables. Below is a gist showing an example.

https://gist.github.com/riltsken/906bace69b65168551ae089f5ae106cb

[danbucholtz]

Let's track this here:

https://github.com/driftyco/ionic-app-scripts/issues/762

Thanks,
Dan