Custom webpack is not working when using livereload on cordova run

[Geschan]

Description

I'm using the auth0 cordova plugin and it requires to add a custom webpack configuration to add a polyfill for the crypto library (see https://auth0.com/docs/quickstart/native/ionic4/01-login#install-the-dependencies ). This works for normal builds like ionic cordova run android or ionic cordova build android. But when using livereload like ionic cordova run android -l I'm getting the following error while building:

[ng] WARNING in ./node_modules/crypto-js/core.js
[ng] Module not found: Error: Can't resolve 'crypto' in '\node_modules\crypto-js'
[ng] ERROR in ./node_modules/@auth0/cordova/src/crypto.js
[ng] Module not found: Error: Can't resolve 'crypto' in '\node_modules\@auth0\cordova\src'

I think there might be some issue with the configurtion in the "ionic-cordova-serve" section of the angular.json but I couldn't figure out what to change.

Environment

Ionic:

   Ionic CLI                     : 6.6.0
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.901.1
   @angular-devkit/schematics    : 9.1.1
   @angular/cli                  : 9.1.1
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res (update available: 0.12.1) : 0.9.0
   native-run (update available: 1.0.0)   : 0.3.0

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v12.16.2 
   npm               : 6.14.4
   OS                : Windows 10

Dependencies

"dependencies": {
    "@angular/common": "~9.1.2",
    "@angular/core": "~9.1.2",
    "@angular/forms": "~9.1.2",
    "@angular/platform-browser": "~9.1.2",
    "@angular/platform-browser-dynamic": "~9.1.2",
    "@angular/router": "~9.1.2",
    "@auth0/angular-jwt": "^4.0.0",
    "@auth0/cordova": "^0.4.3",
    "@ionic-native/android-fingerprint-auth": "^5.24.0",
    "@ionic-native/core": "^5.24.0",
    "@ionic-native/network": "^5.24.0",
    "@ionic-native/safari-view-controller": "^5.24.0",
    "@ionic-native/splash-screen": "^5.24.0",
    "@ionic-native/status-bar": "^5.24.0",
    "@ionic/angular": "^5.0.7",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@sentry/wizard": "^1.0.2",
    "auth0-js": "^9.13.2",
    "cordova-android": "^8.1.0",
    "cordova-plugin-android-fingerprint-auth": "^1.5.0",
    "cordova-plugin-customurlscheme": "^5.0.1",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.0",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-safariviewcontroller": "^1.6.0",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "core-js": "^2.5.4",
    "crypto-js": "^4.0.0",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.28",
    "rxjs": "~6.5.5",
    "sentry-cordova": "^0.17.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^9.1.0",
    "@angular-devkit/architect": "~0.901.1",
    "@angular-devkit/build-angular": "~0.901.1",
    "@angular-devkit/core": "~9.1.1",
    "@angular-devkit/schematics": "~9.1.1",
    "@angular/cli": "~9.1.1",
    "@angular/compiler": "~9.1.2",
    "@angular/compiler-cli": "~9.1.2",
    "@angular/language-service": "~9.1.2",
    "@ionic/angular-toolkit": "^2.2.0",
    "@types/auth0-js": "^9.12.4",
    "@types/crypto-js": "^3.1.44",
    "@types/jasmine": "~3.5.10",
    "@types/jasminewd2": "~2.0.8",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.5.13",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "sharp": "^0.24.1",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.8.3"
  },

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "webpack.config.js"
            },
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "styles": [],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve:production"
            },
            "ci": {
              "devServerTarget": "app:serve:ci"
            }
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

[osben]

please add support custom-webpack

[lucashsilva]

I'm facing the same issue. Any news?

[Lindsor]

Same here

[pipoa]

+1 , customWebpackConfig not called while execute ionic-cordova-build

[mhartington]

There's not a whole lot that can be done here. As far as I am aware, in order to support the kind of changes we need in the cordova-serve builder, we need to be explicit about what kind of builder we trigger.

If someone wants to send a PR to address this, please do. But for now, this doesn't appear to be something that can be supported.

[Bishop19]

HI! Any updates on this? I'm really struggling on this 😞

[mhartington]

This issue is closed. We will not be implementing.