Ionic 6 : empty app white screen with android on real device

Ionic Framework
1

any help to setup env to build an empty app with android ?

emulator android OK
ionic serve OK
iOS ok
Android on real device => white screen

The app is just ionic start test blank --type=angular -capacitor

Ionic:

   Ionic CLI                     : 6.16.2 (C:\Users\XXX\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.0.3
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.4.0
   @capacitor/android : 3.4.0
   @capacitor/core    : 3.4.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.1
   native-run  : 1.5.0

System:

   NodeJS : v16.13.2 (C:\Program Files\nodejs\node.exe)
   npm    : 8.1.2
   OS     : Windows 10

Logcat for KO real device

2022-01-26 02:28:26.519 23033-23033/appId E/Zygote: v2
2022-01-26 02:28:26.520 23033-23033/appId E/Zygote: accessInfo : 0
2022-01-26 02:28:27.044 23033-23033/appId E/chromium: [ERROR:filesystem_posix.cc(89)] stat /data/user/0/appId/cache/WebView/Crashpad: No such file or directory (2)
2022-01-26 02:28:27.044 23033-23033/appId E/chromium: [ERROR:filesystem_posix.cc(62)] mkdir /data/user/0/appId/cache/WebView/Crashpad: No such file or directory (2)
2022-01-26 02:28:27.239 23033-23033/appId E/Capacitor: Unable to read file at path public/plugins
2022-01-26 02:28:27.254 23033-23093/appId E/libEGL: validate_display:99 error 3008 (EGL_BAD_DISPLAY)
2022-01-26 02:28:27.939 23033-23033/appId E/Capacitor/Console: File: http://localhost/ - Line 287 - Msg: SyntaxError: Unexpected token .
2022-01-26 02:28:27.943 23033-23136/appId E/Capacitor: JavaScript Error: {"type":"js.error","error":{"message":"Uncaught SyntaxError: Unexpected token .","url":"http://localhost/vendor.js","line":27056,"col":38,"errorObject":"{}"}}
2022-01-26 02:28:27.944 23033-23033/appId E/Capacitor/Console: File: http://localhost/vendor.js - Line 27056 - Msg: Uncaught SyntaxError: Unexpected token .
2022-01-26 02:29:06.170 23033-23033/appId E/Capacitor/Console: File: http://localhost/home - Line 287 - Msg: SyntaxError: Unexpected token .
2022-01-26 02:29:06.176 23033-23136/appId E/Capacitor: JavaScript Error: {"type":"js.error","error":{"message":"Uncaught SyntaxError: Unexpected token .","url":"http://localhost/vendor.js","line":27056,"col":38,"errorObject":"{}"}}
2022-01-26 02:29:06.177 23033-23033/appId E/Capacitor/Console: File: http://localhost/vendor.js - Line 27056 - Msg: Uncaught SyntaxError: Unexpected token .

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor() {


    console.log("Is there anybody out there ?")

  }
}

chrome://inspect/#devices

console

SyntaxError: Unexpected token
Uncaught SyntaxError: Unexpected token .

first error : cap.handleError = err => win.console.error(err);
second error : this._platformLocation.historyGo?.(relativePosition);

ideas ?

1 Like
2

have you installed and set up Android studio and java 8?

3

Android Studio ArticFox

java version "1.8.0_321"
Java(TM) SE Runtime Environment (build 1.8.0_321-b07)
Java HotSpot(TM) Client VM (build 25.321-b07, mixed mode)
4

not saying much, that error could mean anything. I would suggest to remove the platform and re add it.

5

already try

try also add “@capacitor/splash-screen”: “^1.2.1” nothing

6

found something that may be related to your error: Ionic v4 and old WebView (v 44)

10

So try to build for android on mac => same thing : blank after splash
It work on an emulator Galaxy Nexus API 30
FYI the target device is a Samsung S6

variables.gradlle.ts

    minSdkVersion = 21
    compileSdkVersion = 30
    targetSdkVersion = 30

Could the target device the problem ? too old perhaps

anyone ?

11

I have the exact same problem, also ionic 6.

01-26 08:51:47.106  9905  9905 E Capacitor/Console: File: http://192.168.88.223:8101/ - Line 287 - Msg: SyntaxError: Unexpected token .
01-26 08:51:47.108  9905  9986 E Capacitor: JavaScript Error: {"type":"js.error","error":{"message":"Uncaught SyntaxError: Unexpected token .","url":"http://192.168.88.223:8101/vendor.js","line":35130,"col":38,"errorObject":"{}"}}
01-26 08:51:47.108  9905  9905 E Capacitor/Console: File: http://192.168.88.223:8101/vendor.js - Line 35130 - Msg: Uncaught SyntaxError: Unexpected token .

  historyGo(relativePosition = 0) {
    this._platformLocation.historyGo?.(relativePosition);   <--- 35130
  }

When running ionic serve everything works fine, when running on android emulator (version 8.1) I get a white page with errors in console.

However, on the Xaiomi POCO phone running Android 11, the app launches correctly

Hmm, after changing the target in tsconfig.json from es2015 to es5, the application started on the emulator.

Could changing the target cause any problems in the future?

2 Likes
12

Thanks for your part

ionic capacitor build android --prod

is the solution to deploy empty app on my real device

1 Like
13

For anyone who’s trying to get it done and, unfortunately, the accepted solution not working, I suggest updating the .browserslistrc file as in Ionic 6 default project white screen on Android 30 or below when using --prod - #20 by ldebeasi with the following content:

Chrome >=60
Firefox >=63
Edge >=79
Safari >=13
iOS >=13

I had this issue targeting Android APIs lower than or equal to 30.

2 Likes
14

Thanks a lot, for me, altering the browserslist file according to your suggestion was the correct answer. :slight_smile:

1 Like
15

ionic capacitor build android --prod
This worked for me! Thanks a lot.

16

i am also getting the same in after splash getting white screen
01-26 08:51:47.106 9905 9905 E Capacitor/Console: File: http://localhost:8101/ - Line 287 - Msg: SyntaxError: Unexpected token .
01-26 08:51:47.108 9905 9986 E Capacitor: JavaScript Error: {“type”:“js.error”,“error”:{“message”:“Uncaught SyntaxError: Unexpected token .”,“url”:“http://localhost:8101/vendor.js",“line”:35130,“col”:38,“errorObject”:"{}”}}
01-26 08:51:47.108 9905 9905 E Capacitor/Console: File: http:localhost:8101/vendor.js - Line 35130 - Msg: Uncaught SyntaxError: Unexpected token .

17

What device? Emulator?

18

I am having the same issue.
App works fine in simulator on Android API 29 and above but keep getting this https://i.imgur.com/kTa6L6t.png. I did a build with minSdkVersion set to 29 and tested on Firebase Test Lab and same issue. App is white after splash Screen.

Due to this Google Playstore keeps rejecting my app.

Any body able to fix this. I am using Ionic 7.

19

You’ve gotta target SDK >= 33 (reference) though that is unrelated to your JS issue.

You say your app works fine in simulator 29 and above. So you are getting the error on API 28 and below?

20

Yes, getting this error on API 28 and below.
However, fixed it by adding polyfill for globalthis and setting tsconfig target to es5.

1 Like