Ionic --Prod Mode. error blank screen and Cannot find module "." Only with (Cordova run android --prod)

Hi,

I’m Ionic serve -lsc and ionic cordova run android perfectly working and console in has not errors.

After run this commands “ionic cordova run android --prod”

Build successfull > Apk created successful > Device install successfull
but
Open blank screeen chrome inspect tool one error

cordova.js:1219 deviceready has not fired after 5 seconds.
cordova.js:1212 Channel not fired: onPluginsReady
cordova.js:1212 Channel not fired: onCordovaReady
cordova.js:1212 Channel not fired: onDOMContentLoaded
vendor.js:1 Uncaught Error: Cannot find module "."
    at vendor.js:1
    at vendor.js:1
    at Object.<anonymous> (vendor.js:1)
    at e (vendor.js:1)
    at Object.366 (main.js:1)
    at e (vendor.js:1)
    at window.webpackJsonp (vendor.js:1)
    at main.js:1
(anonymous) @ vendor.js:1
(anonymous) @ vendor.js:1
(anonymous) @ vendor.js:1
e @ vendor.js:1
366 @ main.js:1
e @ vendor.js:1
window.webpackJsonp @ vendor.js:1
(anonymous) @ main.js:1
vendor.js:1 Ionic Native: deviceready event fired after 1780 ms

Ionic:

   ionic (Ionic CLI)  : 4.9.0 (C:\Users\Mesut\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.2, (and 8 other plugins)

System:

   NodeJS : v10.14.2 (C:\Program Files\nodejs\node.exe)
   npm    : 4.6.1
   OS     : Windows 10

Package.json

{
  "name": "test.ionic",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/common": "^7.1.4",
    "@angular/compiler": "^7.1.4",
    "@angular/compiler-cli": "^7.1.4",
    "@angular/core": "^7.1.4",
    "@angular/forms": "^7.1.4",
    "@angular/http": "^7.1.4",
    "@angular/platform-browser": "^7.1.4",
    "@angular/platform-browser-dynamic": "^7.1.4",
    "@ionic-native/core": "^4.18.0",
    "@ionic-native/device": "^4.17.0",
    "@ionic-native/firebase": "^4.18.0",
    "@ionic-native/geolocation": "^4.18.0",
    "@ionic-native/image-picker": "^4.18.0",
    "@ionic-native/open-native-settings": "^4.18.0",
    "@ionic-native/splash-screen": "^4.18.0",
    "@ionic-native/status-bar": "^4.18.0",
    "@ionic/storage": "^2.2.0",
    "angularfire2": "^5.1.1",
    "cordova-android": "^7.1.4",
    "cordova-browser": "5.0.4",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-geolocation": "4.0.1",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.3.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-telerik-imagepicker": "~2.2.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.6.0",
    "firebase": "^5.7.2",
    "ionic-angular": "3.9.2",
    "ionic-native-http-connection-backend": "^4.0.8",
    "ionicons": "^4.5.1",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.11",
    "@ionic/cli-plugin-proxy": "1.5.8",
    "@ionic/lab": "^1.0.16",
    "node-sass": "4.11.0",
    "typescript": "^2.7.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-device": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-telerik-imagepicker": {
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "your usage message"
      },
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
      },
      "cordova-plugin-firebase": {},
      "cordova-open-native-settings": {}
    },
    "platforms": [
      "browser",
      "android"
    ]
  }
}

Have exactly same problem everything works, except --prod

Yes but my need production build and release.

run with android v 7.1.4

I change ionic version. v3 to v4. I’am happy.

Did you solve the issue stated in the question in the given environment? It’s absolutely obvious that there are people that built big apps, and the cost to adapt all the developed stack from v3 to v4 is absolutely impracticable, so we are looking for a way to fix the issue in the v3 version.

1 Like

Basically, what i did was updating ionic

npm i -g ionic

Updating app scripts

npm install @ionic/app-scripts@latest --save-dev

And changing the version of typescript to ^2.8.3

For known reasons, exit the terminal and open a new one, just in case.

This was my solution, also running it with

ionic cordova run android --prod

and debugging with the Chrome Dev Tools helped me to find answers.

Result of ionic info:

Ionic:

   ionic (Ionic CLI)  : 4.11.0 (/home/homefolder/.nvm/versions/node/v10.14.1/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.3

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : no whitelisted plugins (19 plugins total)

System:

   Android SDK Tools : 26.1.1 (/home/homefolder/Android/Sdk)
   NodeJS            : v10.14.1 (/home/homefolder/.nvm/versions/node/v10.14.1/bin/node)
   npm               : 6.4.0
   OS                : Linux 4.15
2 Likes

Thanks Bro. I change dependencies fixed this issue.

  "dependencies": {
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@ionic-native/android-permissions": "^4.7.0",
    "@ionic-native/camera": "^4.7.0",
    "@ionic-native/core": "^4.7.0",
    "@ionic-native/diagnostic": "^4.7.0",
    "@ionic-native/google-maps": "^4.8.2",
    "@ionic-native/native-geocoder": "^4.7.0",
    "@ionic-native/network": "^4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic/storage": "2.1.3",
    "cordova-android": "7.0.0",
    "cordova-browser": "~5.0.4",
    "cordova-ios": "4.5.4",
    "cordova-plugin-add-swift-support": "^1.7.1",
    "cordova-plugin-advanced-http": "^1.11.1",
    "cordova-plugin-android-permissions": "^1.0.0",
    "cordova-plugin-camera": "~4.0.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "~1.7.1",
    "cordova-plugin-googlemaps": "^2.3.5",
    "cordova-plugin-ionic": "^4.2.0",
    "cordova-plugin-ionic-keyboard": "2.0.5",
    "cordova-plugin-ionic-webview": "^2.0.0",
    "cordova-plugin-nativegeocoder": "^3.1.1",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.3.2",
    "cordova.plugins.diagnostic": "^4.0.8",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "minimist": "^1.2.0",
    "run": "1.4.0",
    "rxjs": "5.5.10",
    "sw-toolbox": "3.6.0",
    "xml2js": "^0.4.19",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.9",
    "typescript": "~2.6.2"
  },

Hello I am facing the same issue with blank white screen for --prod build but do not understand how you determine which versions of @ionic/app-scripts and typescript to use in the package.json. For example how did you figure out to use 3.1.9 and ~2.6.2 to fix your specific build?