Ionic-cli: Cannot pass "advanced options" to `ng` when when running `ionic build --engine=cordova`

[asgeo1]

Description:

I am trying to use the ngx-build-plus package, so I can customise the webpack.config.js used by Ionic/Angular when builds are created.

It does work when I run the build command like this:

ionic build --platform=ios -- --extra-webpack-config webpack.partial.js

And I can see in the console, that it then calls the ng CLI like so, passing along the --extra-webpack-config argument:

ng run app:build --extra-webpack-config webpack.partial.js

However, if I want to build for cordova then I also need the --engine=cordova argument. So I call it again:

ionic build --platform=ios --engine=cordova -- --extra-webpack-config webpack.partial.js

But now the --extra-webpack-config option is no longer passed to ng...

ng run app:ionic-cordova-build --platform=ios

Why is that? Is there any workaround, or can this be fixed?

My ionic info:

Ionic:

   Ionic CLI                     : 5.4.15 (/Users/asgeo1/.node/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 21 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   Android SDK Tools : 26.1.1 (/Users/asgeo1/Development/Android/sdk)
   ios-deploy        : 1.10.0
   ios-sim           : 8.0.2
   NodeJS            : v12.14.1 (/Users/asgeo1/.nodenv/versions/12.14.1/bin/node)
   npm               : 6.13.4
   OS                : macOS Mojave
   Xcode             : Xcode 11.2.1 Build version 11B53

[imhoffd]

@asgeo1 If ngx-build-plus overrides the builder for the build command in your angular.json, then I'm afraid there's nothing we can do because ionic-cordova-build extends the Angular builder and can't simply extend a third-party builder. You can take a look at what we do in our builders for Cordova and possibly manually configure webpack to do it. If you do, be sure to share your work so others may benefit!

[asgeo1]

Hi @dwieeb, ngx-build-plus modifies angular.json like so:

diff --git a/angular.json b/angular.json
index b9c45be8..81a5f371 100644
--- a/angular.json
+++ b/angular.json
@@ -12,7 +12,7 @@
       "schematics": {},
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "ngx-build-plus:browser",
           "options": {
             "outputPath": "www",
             "index": "src/index.html",
@@ -81,7 +81,7 @@
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "ngx-build-plus:dev-server",
           "options": {
             "browserTarget": "app:build"
           },
@@ -104,7 +104,7 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "ngx-build-plus:karma",
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",

I don't fully understand how these builders work yet, but if I work something out I will surely share.

However, I'm just trying to understand why the ionic build --platform=ios --engine=cordova command can't just pass along any additional arguments to ng, i.e. arguments after the -- like the other commands do.

If it did that, then I think it would work the way I was hoping.

[asgeo1]

Hmm, I guess just passing the additional argument isn't enough, as I can see that app:ionic-cordova-build rejects it:

$ ng run app:ionic-cordova-build --platform=ios --extra-webpack-config webpack.partial.js
Unknown option: '--extra-webpack-config'
Unknown option: 'webpack.partial.js'

I guess I'll have to try and understand these builders a bit more...

[imhoffd]

However, I'm just trying to understand why the ionic build --platform=ios --engine=cordova command can't just pass along any additional arguments to ng

With --engine=cordova, the builders in @ionic/angular-toolkit are used, which don't support all the Angular CLI options. See our schema.json vs the Angular browser builder schema.json.

[asgeo1]

Hmm, OK well I'm still looking into it. If I can't work it out I'll just close this ticket off.

But I figure I might as well mention what I'm trying to achieve in the first place, in case this is just the wrong way to go about it...

The only reason I'm trying to get ngx-build-plus working, is because I want to add proper environment variables to my build. I know Ionic has src/environments/environment.*.ts files, that can be changed via the --configuration flag when running commands.

But I don't care for those environment files much. I would much prefer normal environment variables, that I can set on the command line, or exported in the shell, that are then referenced in my angular code via env.process.

i.e. TEST_VARIABLE=abcd ionic cordova build ios

Normally this easy to setup (if you have access to the webpack config), and can then use any of the dotenv npm packages to inject the environment variables. Hence why I was trying to get ngx-build-plus going...

If anyone has any other ideas, let me know.

[asgeo1]

I've come up with a solution actually, based on this blog post: https://medium.com/@ferie/how-to-pass-environment-variables-at-building-time-in-an-angular-application-using-env-files-4ae1a80383c

Basically you create a node script, which will dynamically generate src/environments/environment.ts with contents of your .env file, which you set to run before any of the other ionic CLI commands.

I guess I'll close this off then, thanks for your help.