How to diagnose white screen on startup on Android device

peterjc · February 13, 2017, 7:54am

I’ve been developing my Ionic 2 app, running in the browser, and also running fine on the device with the debug build.

I wanted to start to test out a release build. I have create the keystore file etc and did some release builds.

Initially, I used ionic build android --release and installed this, and everything worked fine. After I discovered this does not minimize, and to do so I then built using ionic build android --prod --release. Looking in the .apk it is minimized as expected. I install it and the installs works fine.

However, when I run it, I just get the splash, and then a white screen, and that is it. I simplified my app.component.ts to remove all my startup logic, so I just hardwire to a new new near blank page, and now have nothing but the following in the MyApp constructor…

 this.platform.ready().then (() => {

  StatusBar.styleDefault();
  Splashscreen.hide();
 });

Still nothing. I created a blank app, and tried the same build (ie ionic build android --prod --release), and that worked fine. So, there must be something in mine. But this only occurs in the minified release, so I can’t debug into it (or didn’t seem to be able to). I am not sure how to track down what the error could be. Does anyone have any suggestions?

Thanks in advance!

luukschoen · February 13, 2017, 12:46pm

You should be able to see any logs if you’re using chrome dev tools and have developer options enabled on your android phone. This way it’s possible to detect any errors happening in the HTML/Javascript of your app.

starkemc · February 13, 2017, 3:39pm

I was having a similar issue… make sure the following values are set in your config.xml

  <preference name="SplashMaintainAspectRatio" value="true"/>
  <preference name="FadeSplashScreenDuration" value="300"/>
  <preference name="ShowSplashScreen" value="true"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="3000"/>
  <preference name="AutoHideSplashScreen" value="false"/>
  <preference name="SplashShowOnlyFirstTime" value="false"/>
  <preference name="FadeSplashScreen

peterjc · February 18, 2017, 10:03am

When I install a built version using the --prod --release flags, the application does not show up in the list when going to chrome://inspect/#devices. Should it still show up there (when built with the --prod --release flags (ie not debug)?

peterjc · February 18, 2017, 10:13am

I tried setting all those splash screen settings, but unfortunately it has not helped in my case. I must have some other error occurring. Just really need to see if any errors are being logged anywhere. Makes it hard when the error does not happen for a debug build.

peterjc · February 18, 2017, 12:17pm

I am now wondering if I can build a minified version to run in my desktop browser to help find this problem. I have asked this in other post.

peterjc · February 19, 2017, 1:53am

I can now see the error by running ionic run android --prod

In dev tools I see

	Uncaught Error: Cannot find module "./app.module.ngfactory"
	  at Object.<anonymous> (main.js:7)
  	  at e (main.js:1)
	  at main.js:1
	  at main.js:1

Doing a “pretty print” this is where the error is being thrown…

This only occurs when I use the --prod flag.

Has anyone seen this or any ideas? (the important thing being occurs when built with the --prod flag)

My complete packages are…

"dependencies": {
	"@angular/common": "2.2.1",
	"@angular/compiler": "2.2.1",
	"@angular/compiler-cli": "2.2.1",
	"@angular/core": "2.2.1",
	"@angular/forms": "2.2.1",
	"@angular/http": "2.2.1",
	"@angular/platform-browser": "2.2.1",
	"@angular/platform-browser-dynamic": "2.2.1",
	"@angular/platform-server": "2.2.1",
	"@ionic/storage": "1.1.7",
	"@types/c3": "^0.4.38",
	"@types/jszip": "0.0.32",
	"@types/lodash": "^4.14.51",
	"c3": "^0.4.11",
	"ionic-angular": "2.0.1",
	"ionic-native": "2.4.1",
	"ionicons": "3.0.0",
	"js-logger": "^1.3.0",
	"jslogger": "^1.0.3",
	"jszip": "^3.1.3",
	"lodash": "^4.17.4",
	"moment": "^2.17.1",
	"ng2-translate": "^5.0.0",
	"rxjs": "5.0.0-beta.12",
	"semaphore-async-await": "^1.3.1",
	"sw-toolbox": "3.4.0",
	"zone.js": "0.6.26"
  },
  "devDependencies": {
	"@ionic/app-scripts": "1.0.0",
	"@types/jasmine": "^2.5.42",
	"@types/node": "^7.0.5",
	"angular-cli": "^1.0.0-beta.28.3",
	"codecov": "^1.0.1",
	"install": "^0.8.7",
	"jasmine-core": "^2.5.2",
	"jasmine-spec-reporter": "^3.2.0",
	"karma": "^1.4.1",
	"karma-chrome-launcher": "^2.0.0",
	"karma-jasmine": "^1.1.0",
	"karma-mocha-reporter": "^2.2.2",
	"karma-remap-istanbul": "^0.6.0",
	"ts-node": "^2.1.0",
	"tslint": "^4.4.2",
	"tslint-eslint-rules": "^3.3.0",
	"typescript": "^2.1.5"
  },
  "cordovaPlugins": [
	"cordova-plugin-statusbar",
	"cordova-plugin-whitelist",
	"cordova-plugin-console",
	"cordova-plugin-device",
	"cordova-plugin-splashscreen",
	"ionic-plugin-keyboard"
  ],

rapropos · February 19, 2017, 4:20am

See app-scripts #733.

peterjc · February 19, 2017, 8:53am

I deleted my node_modules and did a refresh (npm install) as suggested. I also uninstalled and reinstalled ionic -g. My package.json looks ok, but I still get the same problem.

peterjc · February 19, 2017, 9:08am

Could this be a TypeScript version issue as mentioned here?

I have 2.1.5. I can’t really go back to pre 2.1 as am using async/await everywhere.

rapropos · February 19, 2017, 9:17am

Perhaps. I would follow app-scripts #197.

peterjc · February 19, 2017, 9:43am

Yes it seems there are problems with TypeScript >=2.1 and Angular 2! I had no idea when updating to 2.1 (as really wanted the async/await) and now have used it’s features absolutely everywhere! Panic stations!

Delboii · February 19, 2017, 11:04am

One thing to notice, I have heard of people having issues with latest build when using both flags in their CLI. Instead of

 ionic run android --prod --release

Consider using either :

 ionic run android --prod

or

 ionic run android --release

Also when you are running the app via the phone itself. Ensure debugging mode is enabled in Settings > Developer Settings and while phone is connected to PC. Open chrome://inspect/ to see device logs of what is happening

cybertim · March 2, 2017, 12:46pm

Same issue (lots of async/await stuff implemented with TS2.2)
But I solved it today!
Searching everywhere eventually it comes down to the ngc (angular2 compiler) having issues with TS2.1+
(more info here https://github.com/angular/angular/pull/13294)
But they say most issues are resolved with ngc 2.4+ so desperate I changed all the deps in my package.json to:

    "dependencies": {
        "@angular/common": "2.4.9",
        "@angular/compiler": "2.4.9",
        "@angular/compiler-cli": "2.4.9",
        "@angular/core": "2.4.9",
        "@angular/forms": "2.4.9",
        "@angular/http": "2.4.9",
        "@angular/platform-browser": "2.4.9",
        "@angular/platform-browser-dynamic": "2.4.9",
        "@angular/platform-server": "2.4.9",
        "@ionic/storage": "1.1.9",
        "ionic-angular": "2.1.0",
        "ionic-native": "2.7.0",
        "ionicons": "3.0.0",
        "rxjs": "5.2.0",
        "sw-toolbox": "3.4.0",
        "zone.js": "0.6.26"
      },
      "devDependencies": {
        "@ionic/app-scripts": "nightly",
        "typescript": "2.2.1"
      }

And for some reason everything compiles now! (and --aot and --prod and --release work!)

peterjc · March 2, 2017, 12:52pm

This looks promising… Be interested if no other problems arise from this combination (will try myself as well)

peterjc · March 5, 2017, 5:26am

I gave the above ago. Had a problem with lodash which I could get around via adding “skipLibCheck” : true, to the tsconfig.json, but the problem I now have is the following runtime error…

Runtime Error
  Can't resolve all parameters for Storage: (?, ?).

  		Error: Can't resolve all parameters for Storage: (?, ?).
		at SyntaxError.BaseError [as constructor] (http://localhost:8100/build/main.js:170862:27)
		at new SyntaxError (http://localhost:8100/build/main.js:13068:16)
		at CompileMetadataResolver._getDependenciesMetadata (http://localhost:8100/build/main.js:31810:31)
		at CompileMetadataResolver._getTypeMetadata (http://localhost:8100/build/main.js:31685:26)
		at CompileMetadataResolver._getInjectableMetadata (http://localhost:8100/build/main.js:31673:21)
		at CompileMetadataResolver.getProviderMetadata (http://localhost:8100/build/main.js:31915:40)
		at http://localhost:8100/build/main.js:31873:49
		at Array.forEach (native)
		at CompileMetadataResolver._getProvidersMetadata (http://localhost:8100/build/main.js:31840:19)
		at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/main.js:31524:50)

I promise to never upgrade TypeScript without asking again. Just need to get past it this time…

golear · March 7, 2017, 12:46am

@peterjc
Try this in your app.module.ts file:

export function provideStorage() {
 return new Storage();
}
@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  entryComponents: [
   ...
  ],
  imports: [
...
  ],
  providers: [
    { provide: Storage, useFactory: provideStorage },
    ...
]
 bootstrap: [AppComponent]
})
export class AppModule { }

rapropos · March 7, 2017, 1:01am

@peterjc: Upgrading ionic-storage to 2.0.0 should likely fix this.

peterjc · March 7, 2017, 1:51pm

Thanks for the feedback. I tried both the above. Upgrading storage to 2.0.0 I still got the following error when running ionic serve…
Runtime Error Can't resolve all parameters for Storage: (?).

I then tried using the factory suggested above by @golear. This time ionic serve launched the app with no runtime errors!

So then tried the ionic build android --release --prod --aot but unfortunately for the following errors

BTW, Ionic info gives me the following (node is 7.2.0)

 ordova CLI: 6.4.0
 Ionic CLI Version: 2.2.1
 Ionic App Lib Version: 2.2.0
 ios-deploy version: Not installed
 ios-sim version: Not installed
 OS: Windows 10
  Node Version: v7.2.0
 Xcode version: Not installed

And the errors are…

 ionic-app-scripts build "--prod" "--release" "--aot"

		[21:33:38]  ionic-app-scripts 1.1.3-201702230511
	[21:33:38]  build prod started ...
	[21:33:38]  clean started ...
	[21:33:38]  clean finished in 1 ms
	[21:33:38]  copy started ...
	[21:33:38]  ngc started ...
	[21:33:44]  build prod failed: Error encountered resolving symbol values statically. Calling function
				'NoOpAnimationDriver', function calls are not supported. Consider replacing the function or lambda with a
				reference to an exported function, resolving symbol AnimationDriver.NOOP in
				D:/dev/pr/myapp/node_modules/@angular/platform-browser/src/dom/animation_driver.d.ts, resolving
				symbol BrowserTestingModule in
				D:/dev/pr/myapp/node_modules/@angular/platform-browser/testing/browser.d.ts, resolving symbol
				BrowserTestingModule in
				D:/dev/pr/myapp/node_modules/@angular/platform-browser/testing/browser.d.ts
	[21:33:44]  ionic-app-script task: "build"
	[21:33:44]  Error: Error encountered resolving symbol values statically. Calling function 'NoOpAnimationDriver',
				function calls are not supported. Consider replacing the function or lambda with a reference to an exported
				function, resolving symbol AnimationDriver.NOOP in
				D:/dev/pr/myapp/node_modules/@angular/platform-browser/src/dom/animation_driver.d.ts, resolving
				symbol BrowserTestingModule in
				D:/dev/pr/myapp/node_modules/@angular/platform-browser/testing/browser.d.ts, resolving symbol
				BrowserTestingModule in
				D:/dev/pr/myapp/node_modules/@angular/platform-browser/testing/browser.d.ts
	Error: Error encountered resolving symbol values statically. Calling function 'NoOpAnimationDriver', function calls are not supported. Conside
	r replacing the function or lambda with a reference to an exported function, resolving symbol AnimationDriver.NOOP in D:/dev/pr/myapp
	ect/node_modules/@angular/platform-browser/src/dom/animation_driver.d.ts, resolving symbol BrowserTestingModule in D:/dev/pr/myapp
	/node_modules/@angular/platform-browser/testing/browser.d.ts, resolving symbol BrowserTestingModule in D:/dev/pr/myapp/node_module
	s/@angular/platform-browser/testing/browser.d.ts
		at SyntaxError.BaseError [as constructor] (D:\dev\pr\myapp\node_modules\@angular\compiler\bundles\compiler.umd.js:1597:31)
		at new SyntaxError (D:\dev\pr\myapp\node_modules\@angular\compiler\bundles\compiler.umd.js:1795:20)
		at simplifyInContext (D:\dev\pr\myapp\node_modules\@angular\compiler\bundles\compiler.umd.js:25783:27)
		at StaticReflector.simplify (D:\dev\pr\myapp\node_modules\@angular\compiler\bundles\compiler.umd.js:25795:17)
		at StaticReflector.annotations (D:\dev\pr\myapp\node_modules\@angular\compiler\bundles\compiler.umd.js:25291:64)
		at NgModuleResolver.resolve (D:\dev\pr\myapp\node_modules\@angular\compiler\bundles\compiler.umd.js:17771:86)
		at CompileMetadataResolver.getNgModuleMetadata (D:\dev\pr\myapp\node_modules\@angular\compiler\bundles\compiler.umd.js:18272:6
	4)
		at CompileMetadataResolver.getNgModuleSummary (D:\dev\pr\myapp\node_modules\@angular\compiler\bundles\compiler.umd.js:18228:56
	)
		at D:\dev\pr\myapp\node_modules\@angular\compiler\bundles\compiler.umd.js:18318:72
		at Array.forEach (native)
		
	npm ERR! Windows_NT 10.0.14393
	npm ERR! argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Users\\Peter\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run"
	"ionic:build" "--" "--prod" "--release" "--aot"
	npm ERR! node v7.2.0
	npm ERR! npm  v4.1.2
	npm ERR! code ELIFECYCLE
	npm ERR! myapp@ ionic:build: `ionic-app-scripts build "--prod" "--release" "--aot"`
	npm ERR! Exit status 1
	npm ERR!
	npm ERR! Failed at the myapp@ ionic:build script 'ionic-app-scripts build "--prod" "--release" "--aot"'.
	npm ERR! Make sure you have the latest version of node.js and npm installed.
	npm ERR! If you do, this is most likely a problem with the myapp package,
	npm ERR! not with npm itself.
	npm ERR! Tell the author that this fails on your system:
	npm ERR!     ionic-app-scripts build "--prod" "--release" "--aot"
	npm ERR! You can get information on how to open an issue for this project with:
	npm ERR!     npm bugs myapp
	npm ERR! Or if that isn't available, you can get their info via:
	npm ERR!     npm owner ls myapp
	npm ERR! There is likely additional logging output above.

	npm ERR! Please include the following file with any support request:
	npm ERR!     D:\dev\pr\myapp\npm-debug.log
	PS D:\dev\pr\myapp>

My package.json now includes…

"dependencies": {
"@angular/common": "2.4.9",
"@angular/compiler": "2.4.9",
"@angular/compiler-cli": "2.4.9",
"@angular/core": "2.4.9",
"@angular/forms": "2.4.9",
"@angular/http": "2.4.9",
"@angular/platform-browser": "2.4.9",
"@angular/platform-browser-dynamic": "2.4.9",
"@angular/platform-server": "2.4.9",
"@ionic/storage": "2.0.0",
"@types/c3": "^0.4.38",
"@types/jszip": "0.0.32",
"@types/lodash": "^4.14.51",
"c3": "^0.4.11",
"ionic-angular": "2.1.0",
"ionic-native": "2.4.1",
"ionicons": "3.0.0",
"js-logger": "^1.3.0",
"jslogger": "^1.0.3",
"jszip": "^3.1.3",
"lodash": "^4.17.4",
"moment": "^2.17.1",
"ng2-translate": "^5.0.0",
"rxjs": "5.0.0-beta.12",
"semaphore-async-await": "^1.3.2",
"sw-toolbox": "3.4.0",
"zone.js": "0.6.26"

},
“devDependencies”: {
"@ionic/app-scripts": “nightly”,
“typescript”: “2.2.1”,
"@types/jasmine": “^2.5.42”,
"@types/node": “^7.0.5”,
“angular-cli”: “^1.0.0-beta.28.3”,
“codecov”: “^1.0.1”,
“install”: “^0.8.7”,
“jasmine-core”: “^2.5.2”,
“jasmine-spec-reporter”: “^3.2.0”,
“karma”: “^1.4.1”,
“karma-chrome-launcher”: “^2.0.0”,
“karma-jasmine”: “^1.1.0”,
“karma-mocha-reporter”: “^2.2.2”,
“karma-remap-istanbul”: “^0.6.0”,
“ts-node”: “^2.1.0”,
“tslint”: “^4.4.2”,
“tslint-eslint-rules”: “^3.3.0”
},
“cordovaPlugins”: [
“cordova-plugin-statusbar”,
“cordova-plugin-whitelist”,
“cordova-plugin-console”,
“cordova-plugin-device”,
“cordova-plugin-splashscreen”,
“ionic-plugin-keyboard”
],

Would these errors point to something else I need to do as well?

rapropos · March 7, 2017, 8:29pm

Did you follow the instructions in here?

Topic		Replies	Views
[Ionic 4] Problem building for Android: white screen after splashscreen Ionic Framework	13	12948	March 17, 2020
Stuck On Blank White Screen After Splash On Certain Builds and Devices ionic-v3	3	1903	October 11, 2017
White screen in --prod mode on Android APIs <= 30 Ionic Angular	5	1560	January 17, 2023
White screen after splash screen Ionic-v4 Ionic Framework	6	1054	April 24, 2019
White Blank Screen After Splash Screen Ionic Framework	5	12571	May 7, 2020

How to diagnose white screen on startup on Android device

Related topics