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?

score 13 · Accepted Answer · edited Sep 30 '19 at 15:12

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.

score 1 · Answer 2 · answered Dec 21 '18 at 14:05

1

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

answered Dec 21 '18 at 14:05

Stefdelec

2,711
3
33
40

Yes, that's simiar to what I'm doing right now. I hoped to find a more integrated way :-). – Martin M Dec 21 '18 at 17:09

rguerin · Answer 3 · 2018-12-19T13:14:29.020

0

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...

edited Dec 19 '18 at 13:14

answered Dec 19 '18 at 13:05

rguerin

2,068
14
29

2

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 ... – Martin M Dec 19 '18 at 14:44

How can I specify an angular environment on ionic build?

3 Answers3