How can I specify an angular environment on ionic build?

Question

The Ionic framework uses Angular.
Angular 6 defines environments in ./src/environments/environment.stage.ts .

When building an Angular app, I can select the environment with the parameter --env=stage or --configuration==stage in Angular 6.

To build the ionic app, I use ionic cordova build <platform> which in the background first builds the angular app, before packing it in the Cordova framework.

How can I specify the environment aka configuration for the angular build?

Answer 1

You can add a corresponding configuration entry in angular.json at ionic-cordova-build:

"ionic-cordova-build": {
  "builder": "@ionic/angular-toolkit:cordova-build",
  "options": {
    "browserTarget": "app:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "app:build:production"
    },
    "staging": {
      "browserTarget": "app:build:staging"
    }
  }
},

$ ionic cordova run android --device -c staging

Note the difference from -c staging to -- -c=staging on ionic serve.

The configuration staging must exists under architect.build.configurations in the same file.

Answer 2

On my hand, I created a simple bash file.

#!/usr/bin/env bash

env=$1

targetFile=$PWD/src/environment/environment.ts
filePath=$PWD/src/environment/$1.environment.ts

echo REPLACING FILE ENVIRONMENT : $1
cp $filePath $targetFile

I added environment.ts in .gitignore, and I created a dev.environment.ts and prod.environment.ts.

I switch :

$ bash launcher.sh dev && ionic serve