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

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