Page displaying before the home screen of an application with blank white background

I created an Ionic2 app and successfully launched it on Google Play store. Everything is running smoothly except for one issue - a white page that appears before the app's home view. Can anyone provide guidance on how to resolve this problem?

For further clarification, please refer to the Video.

Important: This issue is specific to the published version and does not occur in the development environment.

My hunch is that it pertains to the splash screen. Which setting should I adjust?

config.xml

    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
angulartypescriptionic2ionic3

Answer №1

To ensure that you are not using the dev apk, it is recommended to build the apk with the --prod --release flags.

If your issue persists, it might be due to the splash screen being hidden before the platform is fully ready. Make sure to add the following configurations in your config.xml file:

<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value="1000" />

In addition, manually hide the splash screen in your app.component.ts file as shown below:

import { Platform, ...} from 'ionic-angular';
import { Splashscreen, ... } from 'ionic-native';

//...

constructor(): {
    this.platform.ready().then(() => {
        Splashscreen.hide();
    });
}

Answer №2

This blank canvas may serve as the backdrop for the application window.

To customize the color, navigate to the styles.xml file and modify the windowBackground attribute within your app's theme settings.

If you're looking to eliminate the transition time between views, include specific code in your project. Upon launching a new activity, ensure that the setContentView() method is called within the onCreate() function of the activity.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Angular 5 for sending HTTP POST requests with x-www-form-urlencoded content-type

Currently, I have been immersing myself in Angular and am nearing completion of my initial end-to-end application. This specific app is designed to interact with Spotify's public API in order to search for music and play track previews. The primary i ...

angularhttppostspotify

Switching from a vertical to horizontal tab layout in Angular 4 Material 2 using MD-Gridlist

I'm currently trying to modify the tabbing functionality within an MD-Gridlist so that it tabs horizontally instead of vertically. I've experimented with tab indexes but haven't had any success. My goal is to enable horizontal tabbing throug ...

htmlangularangular-material2

Unable to utilize the CLI Angular command following the version 18 update

After attempting to update my Angular CLI version for testing purposes, I encountered a node error whenever I tried to use the CLI command. Interestingly, all my other global dependencies were working fine. I attempted various solutions such as downgradi ...

angularnpmnpm-installnpm-package

"Encountering issues with the functionality of two Angular5 routers

main.component.html [...] <a routerLink="/company-list">Open</a> [...] <main> <router-outlet name="content"><router-outlet> </main> [...] app.compoment.html <router-outlet><router-outlet> app.routing.modu ...

angulartypescriptangular2-routingangular2-templateangular5

The Typescript Module augmentation seems to be malfunctioning as it is throwing an error stating that the property 'main' is not found on the type 'PaletteColorOptions'

Recently, I've been working with Material-UI and incorporating a color system across the palette. While everything seems to be running smoothly during runtime, I'm facing a compilation issue. Could someone assist me in resolving the following err ...

reactjstypescriptmaterial-uireact-typescript

Using <md-error> in Angular Material 2: A Comprehensive Guide

I am attempting to showcase an error message when a required input is invalid in Angular Material 2. An example can be found in the Angular Material demo app : <form novalidate> <h4>Within a form</h4> <md-input-container> ...

angularangular-materialangular-material2

Is there a way to exclusively view references of a method override in a JS/TS derived class without any mentions of the base class method or other overrides in VS Code?

As I work in VS Code with TypeScript files, I am faced with a challenge regarding a base class and its derived classes. The base class contains a method called create(), which is overridden in one specific derived class. I need to identify all references ...

javascripttypescriptvisual-studio-code

Error: Please note that the loading of the style/types.scss file in the dist build

I am facing an issue with including a general style/types.scss file in the dist folder. Despite having what seems to be correct rules, I cannot locate the content of the file in the build output. What steps can I take to debug this problem and investigate ...

angularwebpack

Challenges with slow performance in Ionic application when handling extensive amounts of data

We're facing performance issues with our ionic angular contact management app. The app experiences severe slowdown as the number of contacts increases, affecting taps, scrolls, and overall responsiveness. Despite utilizing offline storage to store da ...

angularperformanceionic-framework

Having difficulty configuring my Angular .NET Core 2.1 web application correctly on GoDaddy

After deploying my netcore 2.1 Angular application using Visual Studio FTP profile to my Godaddy Host, I encountered a few issues. The deployment included the following contents: ClientApp folder wwwroot appsettings.json application.dlls web.config In t ...

angularweb-deployment

ERROR Error: Uncaught (in promise): ContradictionError: The variable this.products is being incorrectly identified as non-iterable, although it

Seeking a way to extract unique values from a JSON array. The data is fetched through the fetch API, which can be iterated through easily. [please note that the product variable contains sample JSON data, I actually populate it by calling GetAllProducts( ...

javascriptjsonangulartypescriptjson-server

What is the best way to showcase the information retrieved from my API?

I am attempting to display the ID and Document number that are retrieved from an array. Data Returned However, I am not seeing any results in return. You can view the application results here. I have tried using string interpolation like {{document.id}} ...

arraysjsonangulartypescriptapi

Issues encountered when trying to combine ASP.NET Core with Angular 2 using the cli init feature

I am in the process of setting up a new ASP.NET Core project. In the "wwwroot" folder, I executed the command "ng init" via cmd to initialize Angular. After restoring packages, I hosted my ASP project on Kestrel. However, I encountered compile-time errors ...

c#asp.netseleniumangular

Tips for successfully incorporating a date parameter in an Angular 8 GET request

Can anyone guide me on how to correctly pass a date in an Angular 8 $http Get request? I'm looking to achieve something like this: public getCalendarData(Date): any { let myResponse = this.http.get(`${environment.BASE_URL}/getCalendarData` + & ...

angular

Set a generic function type to a variable

Currently, I am facing an issue where I have a declared function type with generics that I want to assign to a named arrow function. Below is an example of the code: import { AutocompleteProps } from '@material-ui/lab/Autocomplete'; const itemTo ...

javascripttypescriptmaterial-uiautocomplete

Leveraging NgRx for seamless integration of object data into component, complete with local duplication functionality

In my Angular application, I have implemented a page with filters that can be toggled and then submitted together. The way I set this up was by using a basic service containing an object of filters (filter name pointing to filter value). To manage the data ...

angularngrxngrx-storengrx-store-4.0

The Angular Animation constantly resets with each new action taken

In my Angular project, I am working on a scaling animation for a list. I want the animation to only trigger when specific buttons (red and green) are pressed. Currently, the animation restarts regardless of what I click on. Can anyone help me troubleshoot ...

javascripthtmlnode.jsangulartypescript

Active Angular component utilizing *ngIf during the programmatically lazy loading of a Module

I find myself in a situation where I need to load numerous components on a specific route within my application. These components are controlled by a logic with *ngIf directives that allow me to show or hide them dynamically. For instance: <div *ngIf=& ...

angulartypescriptlazy-loadingangular-componentsangular-module

Angular 4 Modal Form: Creating Stylish Pop-up Forms

I have encountered an issue in my project where a link that is supposed to open a modal containing a registration form validated by Angular is not functioning properly. The project utilizes the ng-bootstrap library, with a directive and corresponding compo ...

angularng-bootstrap

Exploring the integration of angular with html5 history.pushstate for navigation

Currently, I am enhancing my web application by implementing a new feature. This feature involves writing a script and loading it via a tag manager. The purpose of this script is to target specific UI components, remove them from the DOM, and inject new DO ...

htmlangularangular-routingbrowser-historyhtml5-history