CODEWITHSUNDEEP
javascriptangulartypescriptionic2ionic3
Agustín
Agustín

Reputation: 1546

Ionic 3 - App shows blank screen after build with --prod

It only happens with --prod and on the phone (Android). A weird thing is that if I touch anywhere (even if it's all white) the event that's supposed to be fired at that specific location is fired and suddenly the content is shown.

I read something about the TypeScript version having conflict with @ionic/app-scripts and how I needed to downgrade to TypeScript 2.0.x, but if I do that I get an error on the build that shouts:

Cannot read property 'Private' of undefined: tsickle.js:118:40

I guess that has something to do with all the other versions of my dependencies conflicting with that version of TS.

Here's my package.json:

 {
  "name": "green-dragon",
  "version": "0.0.1",
  "author": "Test",
  "homepage": "http://www.huskysoftware.com.ar/",
  "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/common": "4.4.3",
    "@angular/compiler": "4.4.3",
    "@angular/compiler-cli": "4.4.3",
    "@angular/core": "4.4.3",
    "@angular/forms": "4.4.3",
    "@angular/http": "4.4.3",
    "@angular/platform-browser": "4.4.3",
    "@angular/platform-browser-dynamic": "4.4.3",
    "@ionic-native/core": "4.3.0",
    "@ionic-native/geolocation": "^4.4.2",
    "@ionic-native/network": "^4.3.1",
    "@ionic-native/splash-screen": "4.3.0",
    "@ionic-native/status-bar": "4.3.0",
    "cordova-android": "6.3.0",
    "cordova-ios": "^4.5.1",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-geolocation": "^3.0.0",
    "cordova-plugin-ionic-webview": "^1.1.15",
    "cordova-plugin-network-information": "^1.3.3",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "git+https://github.com/apache/cordova-plugin-statusbar.git",
    "cordova-plugin-whitelist": "^1.3.1",
    "ionic-angular": "3.7.1",
    "ionic-native": "^2.9.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "lodash": "^4.17.4",
    "moment": "^2.19.1",
    "rxjs": "5.4.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.4",
    "typescript": "2.0.9"
  },
  "description": "A beer map app",
  "cordova": {
    "plugins": {
      "cordova-plugin-device": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "Encontrar bares cercanos"
      }
    },
    "platforms": [
      "ios",
      "android"
    ]
  }
}

Apparently, the --minifyjs flag is the one breaking here. But still dont know why

Upvotes: 1

Views: 1077

Answers (1)

Sampath
Sampath

Reputation: 65860

I would like to give 2 clues here.

  1. --prod uses AOT. So you cannot use private properties on your *.html file. So you need to find out where you have used it. Hope this error helps you to find out it. Cannot read property 'Private' of undefined: tsickle.js:118:40

  2. I highly suggest you upgrade your app to latest Ionic 3.9.2

Upvotes: 1

Related Questions