Hey guys,
I’m totally new to Ionic and I’m already failing to get my first app running on an Android device or emulator. I’m using Angular 9.1.11, Ionic 6.10.1 and Capacitor 2.2.0. I did not do more than basically follow the instructions from “build your first app” in the Angular section of the Ionic documentation except leaving out all the photo stuff. I basically did only the setup with the 3 tabs and then tried to deploy on Android. Deploying to Android means:
- I run
ionic build
(no errors) - I run
npx cap sync android
- I run
npx cap open android
- In Android Studio, I start the App on an emulator (Pixel 2 Pie 9.0 - API 28) or my Android phone (Huawei RNE L21 - API 26)
Then the App starts with the Splash Screen, after the Splash Screen goes away there is only a blank screen. The Android Studio logs in the run tab don’t show any obvious problems. There are a couple of errors, but they don’t seem to be problematic (see below in this post). I also tried remote debugging with Chrome dev tools, which doesn’t show any errors in the console.
Running the App in the browser with ionic serve
works by the way, I can see the 3 tabs, do changes with live reload, etc.
I tried to research the problem in the internet, and there is a ton of issues with this blank screen out there. But 98% seems to be with Cordova, not Capacitor, and I’ve found nothing about Ionic 6, only Ionic 3 and 4. Of course I tried a couple of standard things (clean project, invalidate caches) but most of the things I found are just not applicable to my case.
During my research I found another command to use instead of npx cap open android
: ionic capacitor run android -l --external
. When I do that, then everything works. The app loads as it should, on my phone and in the emulator as well. I compared the output in the run tab of Android Studio, and I don’t see any meaningful differences. But that could just be me having no idea about Ionic, Capacitor and Android as well.
I can’t test on IPhone by the way, because I don’t have a Mac at hand. I’m developing on a Windows 10 computer if that matters.
Please find here the logs from Android Studio run tab in case they are of any interest.
First the ones from the app running on the emulator opening Android Studio with the npx cap open android
command (where only blank screen occurs after Splash Screen):
Summary
07/01 18:20:14: Launching ‘app’ on Pixel 2 Pie 9.0 - API 28.
$ adb shell am start -n “io.ionic.starter/io.ionic.starter.MainActivity” -a android.intent.action.MAIN -c android.intent.category.LAUNCHER
Connected to process 21137 on device ‘emulator-5554’.
Capturing and displaying logcat messages from application. This behavior can be disabled in the “Logcat output” section of the “Debugger” settings page.
W/FirebaseApp: Default FirebaseApp failed to initialize because no default options were found. This usually means that com.google.gms:google-services was not applied to your gradle project.
I/FirebaseInitProvider: FirebaseApp initialization unsuccessful
W/o.ionic.starte: Accessing hidden method Landroid/graphics/drawable/Drawable;->getOpticalInsets()Landroid/graphics/Insets; (light greylist, linking)
Accessing hidden field Landroid/graphics/Insets;->left:I (light greylist, linking)
Accessing hidden field Landroid/graphics/Insets;->right:I (light greylist, linking)
Accessing hidden field Landroid/graphics/Insets;->top:I (light greylist, linking)
Accessing hidden field Landroid/graphics/Insets;->bottom:I (light greylist, linking)
E/o.ionic.starte: Invalid ID 0x00000000.
W/o.ionic.starte: Accessing hidden method Landroid/view/View;->getAccessibilityDelegate()Landroid/view/View$AccessibilityDelegate; (light greylist, linking)
W/o.ionic.starte: Accessing hidden method Landroid/view/View;->computeFitSystemWindows(Landroid/graphics/Rect;Landroid/graphics/Rect;)Z (light greylist, reflection)
W/o.ionic.starte: Accessing hidden method Landroid/view/ViewGroup;->makeOptionalFitsSystemWindows()V (light greylist, reflection)
I/WebViewFactory: Loading com.android.chrome version 69.0.3497.100 (code 349710017)
I/o.ionic.starte: The ClassLoaderContext is a special shared library.
I/cr_LibraryLoader: Time to load native libraries: 298 ms (timestamps 7252-7550)
E/cr_VariationsUtils: Failed reading seed file “/data/user/0/io.ionic.starter/app_webview/variations_seed”: /data/user/0/io.ionic.starter/app_webview/variations_seed (No such file or directory)
E/o.ionic.starte: Invalid ID 0x00000000.
E/o.ionic.starte: Invalid ID 0x00000000.
I/chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0
I/cr_LibraryLoader: Expected native library version number “69.0.3497.100”, actual native library version number “69.0.3497.100”
W/cr_ChildProcLH: Create a new ChildConnectionAllocator with package name = com.android.chrome, sandboxed = true
I/cr_BrowserStartup: Initializing chromium process, singleProcess=false
W/o.ionic.starte: Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker;->(Landroid/content/Context;I)V (light greylist, reflection)
Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker;->logEvent(Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;)V (light greylist, reflection)
Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionStarted(I)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)
W/o.ionic.starte: Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionModified(II)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)
Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionModified(IILandroid/view/textclassifier/TextClassification;)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)
Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionModified(IILandroid/view/textclassifier/TextSelection;)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)
Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionAction(III)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)
Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionAction(IIILandroid/view/textclassifier/TextClassification;)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)
D/Capacitor: Starting BridgeActivity
D/Capacitor: Registering plugin: App
D/Capacitor: Registering plugin: Accessibility
D/Capacitor: Registering plugin: BackgroundTask
D/Capacitor: Registering plugin: Browser
D/Capacitor: Registering plugin: Camera
D/Capacitor: Registering plugin: Clipboard
D/Capacitor: Registering plugin: Device
D/Capacitor: Registering plugin: LocalNotifications
D/Capacitor: Registering plugin: Filesystem
D/Capacitor: Registering plugin: Geolocation
D/Capacitor: Registering plugin: Haptics
D/Capacitor: Registering plugin: Keyboard
D/Capacitor: Registering plugin: Modals
D/Capacitor: Registering plugin: Network
D/Capacitor: Registering plugin: Permissions
D/Capacitor: Registering plugin: Photos
D/Capacitor: Registering plugin: PushNotifications
D/Capacitor: Registering plugin: Share
D/Capacitor: Registering plugin: SplashScreen
D/Capacitor: Registering plugin: StatusBar
D/Capacitor: Registering plugin: Storage
D/Capacitor: Registering plugin: Toast
D/Capacitor: Registering plugin: WebView
E/Capacitor: Unable to read file at path public/plugins
D/Capacitor: Loading app at http://localhost
I/o.ionic.starte: Background concurrent copying GC freed 17356(1925KB) AllocSpace objects, 8(188KB) LOS objects, 49% free, 1949KB/3MB, paused 1.328ms total 121.340ms
W/cr_media: Requires BLUETOOTH permission
D/HostConnection: HostConnection::get() New Host Connection established 0xd0132c30, tid 21221
D/HostConnection: HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_dma_v1 ANDROID_EMU_YUV420_888_to_NV21 ANDROID_EMU_YUV_Cache ANDROID_EMU_async_unmap_buffer GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_gles_max_version_2
D/Capacitor: Handling local request: http://localhost/
I/ConfigStore: android::hardware::configstore::V1_0::ISurfaceFlingerConfigs::hasWideColorDisplay retrieved: 0
I/ConfigStore: android::hardware::configstore::V1_0::ISurfaceFlingerConfigs::hasHDRDisplay retrieved: 0
E/chromium: [ERROR:gl_surface_egl.cc(335)] eglChooseConfig failed with error EGL_SUCCESS
D/Capacitor/LN: LocalNotification received: null
Activity started without notification attached
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
D/EGL_emulation: eglCreateContext: 0xeb1fec80: maj 2 min 0 rcv 2
D/EGL_emulation: eglMakeCurrent: 0xeb1fec80: ver 2 0 (tinfo 0xd0004e90)
D/Capacitor: App started
D/Capacitor/App: Firing change: true
V/Capacitor/App: Notifying listeners for event appStateChange
D/Capacitor/App: No listeners found for event appStateChange
D/Capacitor: App resumed
D/OpenGLRenderer: HWUI GL Pipeline
V/Capacitor/Network: Notifying listeners for event networkStatusChange
D/Capacitor/Network: No listeners found for event networkStatusChange
W/VideoCapabilities: Unrecognized profile 4 for video/hevc
I/VideoCapabilities: Unsupported profile 4 for video/mp4v-es
W/cr_MediaCodecUtil: HW encoder for video/avc is not available on this device.
I/OpenGLRenderer: Initialized EGL, version 1.4
D/OpenGLRenderer: Swap behavior 1
D/HostConnection: HostConnection::get() New Host Connection established 0xd01334f0, tid 21224
D/HostConnection: HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_dma_v1 ANDROID_EMU_YUV420_888_to_NV21 ANDROID_EMU_YUV_Cache ANDROID_EMU_async_unmap_buffer GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_gles_max_version_2
W/OpenGLRenderer: Failed to choose config with EGL_SWAP_BEHAVIOR_PRESERVED, retrying without…
D/OpenGLRenderer: Swap behavior 0
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
D/EGL_emulation: eglCreateContext: 0xeb1ff760: maj 2 min 0 rcv 2
E/chromium: [ERROR:gl_surface_egl.cc(335)] eglChooseConfig failed with error EGL_SUCCESS
D/EGL_emulation: eglMakeCurrent: 0xeb1ff760: ver 2 0 (tinfo 0xd01624b0)
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
D/EGL_emulation: eglCreateContext: 0xeb1ca460: maj 2 min 0 rcv 2
D/EGL_emulation: eglMakeCurrent: 0xeb1ca460: ver 2 0 (tinfo 0xd0004e90)
D/eglCodecCommon: setVertexArrayObject: set vao to 1 (1) 0 0
D/HostConnection: createUnique: call
HostConnection::get() New Host Connection established 0xd0135c50, tid 21224
D/HostConnection: HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_dma_v1 ANDROID_EMU_YUV420_888_to_NV21 ANDROID_EMU_YUV_Cache ANDROID_EMU_async_unmap_buffer GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_gles_max_version_2
E/eglCodecCommon: GoldfishAddressSpaceHostMemoryAllocator: ioctl_ping failed for device_type=5, ret=-1
I/Choreographer: Skipped 54 frames! The application may be doing too much work on its main thread.
D/EGL_emulation: eglMakeCurrent: 0xeb1ff760: ver 2 0 (tinfo 0xd01624b0)
D/eglCodecCommon: setVertexArrayObject: set vao to 2 (2) 0 0
D/eglCodecCommon: setVertexArrayObject: set vao to 1 (1) 0 0
E/eglCodecCommon: glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon: glUtilsParamSize: unknow param 0x000085b5
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
D/eglCodecCommon: setVertexArrayObject: set vao to 1 (1) 0 0
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 7 0
I/OpenGLRenderer: Davey! duration=1305ms; Flags=0, IntendedVsync=10969693584058, Vsync=10970593584022, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=10970596573200, AnimationStart=10970596705700, PerformTraversalsStart=10970596834200, DrawStart=10970597981300, SyncQueued=10970602957600, SyncStart=10970615339200, IssueDrawCommandsStart=10970615940900, SwapBuffers=10970954187100, FrameCompleted=10971011035200, DequeueBufferDuration=95000, QueueBufferDuration=425000,
D/EGL_emulation: eglMakeCurrent: 0xeb1ff760: ver 2 0 (tinfo 0xd01624b0)
I/OpenGLRenderer: Davey! duration=1424ms; Flags=0, IntendedVsync=10969693584058, Vsync=10970593584022, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=10970596573200, AnimationStart=10970596705700, PerformTraversalsStart=10970596834200, DrawStart=10971011930000, SyncQueued=10971012441800, SyncStart=10971016488500, IssueDrawCommandsStart=10971040292400, SwapBuffers=10971066299000, FrameCompleted=10971122240100, DequeueBufferDuration=1534000, QueueBufferDuration=1162000,
D/EGL_emulation: eglMakeCurrent: 0xeb1ff760: ver 2 0 (tinfo 0xd01624b0)
E/eglCodecCommon: glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon: glUtilsParamSize: unknow param 0x000085b5
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
D/EGL_emulation: eglMakeCurrent: 0xeb1ff760: ver 2 0 (tinfo 0xd01624b0)
W/cr_CrashFileManager: /data/user/0/io.ionic.starter/cache/WebView/Crash Reports does not exist or is not a directory
D/EGL_emulation: eglMakeCurrent: 0xeb1ff760: ver 2 0 (tinfo 0xd01624b0)
E/eglCodecCommon: glUtilsParamSize: unknow param 0x000085b5
glUtilsParamSize: unknow param 0x000085b5
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
I/OpenGLRenderer: Davey! duration=795ms; Flags=0, IntendedVsync=10971188761458, Vsync=10971605428108, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=10971608283600, AnimationStart=10971608416900, PerformTraversalsStart=10971614441500, DrawStart=10971615170800, SyncQueued=10971617870000, SyncStart=10971621558200, IssueDrawCommandsStart=10971621846100, SwapBuffers=10971950813600, FrameCompleted=10971988013600, DequeueBufferDuration=860000, QueueBufferDuration=907000,
D/Capacitor: Handling local request: http://localhost/assets/icon/favicon.png
E/eglCodecCommon: glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon: glUtilsParamSize: unknow param 0x000085b5
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
E/eglCodecCommon: glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon: glUtilsParamSize: unknow param 0x000085b5
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
D/eglCodecCommon: setVertexArrayObject: set vao to 1 (1) 0 0
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 5 0
E/eglCodecCommon: glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon: glUtilsParamSize: unknow param 0x000085b5
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 0 0
D/eglCodecCommon: setVertexArrayObject: set vao to 1 (1) 0 0
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 5 0
D/Capacitor: SplashScreen was automatically hidden after the launch timeout. You should call SplashScreen.hide()
as soon as your web app is loaded (or increase the timeout).Read more at https://capacitor.ionicframework.com/docs/apis/splash-screen/#hiding-the-splash-screen
D/EGL_emulation: eglMakeCurrent: 0xeb1ff760: ver 2 0 (tinfo 0xd01624b0)
D/EGL_emulation: eglMakeCurrent: 0xeb1ff760: ver 2 0 (tinfo 0xd01624b0)
edit: Regarding the version of Ionic, I’m a bit confused now… The release notes of Ionic say the latest version is 5.2.3. But when I enter ionic --version
in the console, it prompts 6.10.1. When I enter npx --version
, it promts 6.4.1. That doesn’t make sense to me either!