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?

Talkington

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.

Restrictive

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

Querist

Yes, that's simiar to what I'm doing right now. I hoped to find a more integrated way :-). – Talkington

Answer 3

I do not think there is any way to pass your Angular native parameters to an Ionic application.

But Cordova give you plenty of possibilities to manage your app like the hooks feature by example (read here) or by passing a particular config file (see how the --buildConfig flag works here).

I don't really know what you are trying to achieve here, but different environnement sometimes only mean passing different configuration files to your cordova build command. It is up to you to launch it the right way.

EDIT :

You may be looking for the ionic cordova build --prod command... see the full doc here

Hope it helps a bit...

Messier

As far as I can see, Cordova does not know about Angular at all. Ionic builds the Angular app before starting cordova build. The --prod parameter of ionic cordova build does switch the environment / configuration of the Angular but I have more stages than just development and prod (emulation, staging). So I'm still looking ... – Talkington