Yet another blank screen issue (iOS)

After splash screen, shows a blank (white) screen on iOS. The page constructor is called. But nothing is displayed. No error shown on console. Any help is appreciated!

My ionic info:

sh-3.2# ionic info

cli packages: (/Users/imac/Documents/toolsoft/git/ashey.git/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.3.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    ios-deploy : 1.9.2 
    Node       : v9.2.0
    npm        : 5.5.1 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.2 Build version 9C40b 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

Login page content is:

<ion-content text-center padding>

       
        <img class="login-logo" src="assets/images/icon.png" />

        <form [formGroup]="myForm" (ngSubmit)="submit()" >
            <ion-item>
                <ion-label floating>Login</ion-label>
                <ion-input type="text" autocapitalize="none" [formControl]="myForm.controls.login"></ion-input>
            </ion-item>
            <div *ngIf="myForm.controls.login.hasError('required') && myForm.controls.login.touched" class="error-box">* Campo login Ă© obrigatĂłrio!</div>
            <ion-item>
                <ion-label floating>Senha</ion-label>
                <ion-input type="password" [formControl]="myForm.controls.senha"></ion-input>
            </ion-item>
            <div *ngIf="myForm.controls.senha.hasError('required') && myForm.controls.senha.touched" class="error-box">* Campo senha Ă© obrigatĂłrio!</div>
            <button color="azulAgencia" ion-button block round type="submit" [disabled]="!myForm.valid">
                Entrar
            </button>
            <button class="nouppercase-button" clear color="C0064B5" ion-button block round (click)="esqueciSenha()">Esqueceu a senha?</button>
            <button class="nouppercase-button" clear color="C0064B5" ion-button block round (click)="cadastrarse()">Cadastre-se</button>
            <button class="nouppercase-button" clear color="C0064B5" ion-button block round (click)="logarComFacebook()">ou entre com Facebook</button>
            <button class="nouppercase-button" clear color="C0064B5" ion-button block round (click)="logarComGooglePlus()">ou entre com Google Plus</button>
        </form>


</ion-content>

In have included a console.log("Tes"'); in constructor and it is called.

BTW, everything is ok on Android and browser.

Any hints?

The best solution is waiting for release of Capacitor which is coming in a few weeks during February.
Ionic team have replaced cordova splash screen completely. It will no longer come with white blank screen & gray blank screen.

1 Like

Thanks @jamesharvey !! I’ve never heard anything about Capacitor. I am going to take a a look at it.

https://ionic-team.github.io/capacitor/

It will replace cordova. I’d would rather go with capacitor for future release … although we have to wait a few weeks to be able to test it.

1 Like

In the meantime, my hint would be to try to remove/add code brick by brick to find where your problem is. Like removing your all <form [formGroup]="myForm"/>, building and testing. If if works, then again add brick by brick.

Also maybe could you add your code (.ts) to your post too?

2 Likes

That’s a very good approach! I will post my ts in a minute.

Here’s the .ts file:

import { Component } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { NavController, IonicApp, MenuController, ModalController } from 'ionic-angular';
import { Partner } from '../../services/partner';
import { Carrinho } from '../../services/carrinho';
import { Servidores } from '../../basico/servidores';
import { CadastroParceiro } from '../cadastroparceiro/cadastroparceiro';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Device } from '@ionic-native/device';
import { EsqueciSenha } from '../esquecisenha/esquecisenha';
import { TermosUso } from '../termosuso/termosuso';
import 'rxjs/add/operator/retry';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/map';
import { Platform } from 'ionic-angular';
import { PedidoCielo } from '../../services/pedidocielo';
import { AlertController } from 'ionic-angular';
import { TratamentoErro } from '../../services/tratamentoerro';
import { TiposOrganizacao } from "../../services/tiposorganizacao";
import { Persistencia } from "../../services/persistencia";
import { SuperService } from "../../services/super.component";
import { StringUtils } from '../../util/stringutils';
import { IRegion } from '../../model/iregion';
import { ICity } from '../../model/icity';
import { Cidades } from '../../services/cidades';
import { Estados } from '../../services/estados';
import { HomeTab } from "../home/hometab";
import { FacebookLogin } from '../../services/login-facebook';
import { LoginSimples } from '../loginsimples/loginsimples';
import { GooglePlusLogin } from '../../services/login-googleplus';


@Component({
    selector: 'page-login',
    templateUrl: 'login.html'
})
export class Login {

    myForm: FormGroup;


    constructor(
        private _http: Http,
        private nav: NavController,
        private fb: FormBuilder,
        public partner: Partner,
        private carrinho: Carrinho,
        private platform: Platform,
        private pedidoCielo: PedidoCielo,
        private alertController: AlertController,
        private ionicApp: IonicApp,
        private tratamentoErro: TratamentoErro,
        private tiposOrganizacao: TiposOrganizacao,
        private persistencia: Persistencia,
        private device: Device,
        private superService: SuperService,
        private cidades: Cidades,
        private estados: Estados,
        private menuCtrl: MenuController,
        private facebookLogin: FacebookLogin,
        private modalController: ModalController,
        private googlePlusLogin: GooglePlusLogin

    ) {
        console.log("entrou no construtor do login");
        this.init();

        this.menuCtrl.enable(false, 'menuPagina');
        this.menuCtrl.swipeEnable(false, 'menuPagina');
        this.menuCtrl.enable(false, 'menuLojista');
        this.menuCtrl.swipeEnable(false, 'menuLojista');
    }

    init() {
        this.myForm = this.fb.group({
            'login': ['', Validators.required],
            'senha': ['', Validators.required]
        });



    }


    getObterTokenWSJson(): String {

        return '{"name": "' + this.myForm.value.name +
            '", "login": "' + this.myForm.value.login +
            '", "password": "' + this.myForm.value.senha +
            '", "UUID": "' + this.device.uuid +
            '", "token": "' +
            '", "loginWithEmail": ' + StringUtils.verificarTextoContemEmail(this.myForm.value.login) +
            ', "tokenStatus": ""}';

    }


    cadastrarse() {
        this.nav.push(CadastroParceiro);
    }

    navegar() {
        this.superService.showCarregando('', '', false);

        this.tiposOrganizacao.carregarOrganizacoes(
            this.tiposOrganizacao.pagina,
            this.tiposOrganizacao.nenhuma,
            null,
            null,
            null,
            null,
            null,
            data => {
                let randomList = StringUtils.shuffle(data.json().listaObjetos);
                this.tiposOrganizacao.setBanners(randomList);

                this.tiposOrganizacao.carregarOrganizacaoPadrao(
                    data => {
                        this.superService.hideCarregando();
                        this.tiposOrganizacao.organizacaoPadrao = data.json();
                        //console.log('Empresa padrĂŁo');
                        //console.log(this.tiposOrganizacao.organizacaoPadrao);
                        this.superService.hideCarregando();
                        this.nav.setRoot(HomeTab);
                    },
                    err => {
                        this.superService.hideCarregando();
                        // console.log(err);
                        this.tratamentoErro.exibirMensagemErro(err.json());
                    });



            },
            err => {
                this.superService.hideCarregando();
                // console.log(err);
                this.tratamentoErro.exibirMensagemErro(err.json());
            }
        );
    }

    submit() {

        if (this.myForm.valid) {
            this.obterToken();
        }
    }


    obterToken(): void {

        this.superService.showCarregando("Verificando conexĂŁo...", "Aguarde!", false);
        let headers = new Headers({
            'Content-Type': 'application/json;charset=UTF-8',
            'Accept': '*/*'
        });

        let options = new RequestOptions({ headers: headers });

        // console.log(this.getObterTokenWSJson());
        // console.log(Device.uuid);

        this._http.post(Servidores.enderecos.urlWSObterToken, this.getObterTokenWSJson(), options)
            // .timeout(10000000000000000000000)
            .subscribe(
            data => {
                let meuJson = data.json();

                console.log(meuJson);
                console.log("passou 1");

                if ((typeof (meuJson.token) != 'undefined') && (meuJson.token != '')) {

                    this.partner.setPartner(meuJson);
                    this.partner.initCurrentLocation(() =>{
                        if (this.partner.partner.token != null && this.partner.partner.token != undefined) {
                            this.persistencia.gravarUsuario(this.partner.partner);
                        }

                        console.log("passou 2");

                        this.superService.hideCarregando();

                        this.superService.showCarregando("Carregando páginas...", "Aguarde!", false);


                        let estadoUsuario: IRegion = this.estados.getNewItem();

                        estadoUsuario.c_region_id = this.partner.partner.c_region_id;
                        estadoUsuario.name = this.partner.partner.uf;


                        let cidadeUsuario: ICity = this.cidades.getNewItem();

                        cidadeUsuario.c_city_id = this.partner.partner.c_city_id;
                        cidadeUsuario.name = this.partner.partner.City;
                        cidadeUsuario.c_region_id = this.partner.partner.c_region_id;


                        let filtroLojas = {
                            estado: (estadoUsuario.name? estadoUsuario : null),
                            cidade: (cidadeUsuario.name ? cidadeUsuario : null),
                            bairro: null
                        }


                        this.tiposOrganizacao.carregarOrganizacoes(
                            this.tiposOrganizacao.pagina,
                            this.tiposOrganizacao.nenhuma,
                            null,
                            null,
                            filtroLojas.estado ? filtroLojas.estado.name : null,
                            filtroLojas.cidade ? filtroLojas.cidade.name : null,
                            filtroLojas.bairro ? filtroLojas.bairro : null,
                            data => {

                                // console.log(data.json().listaObjetos);

                                let randomList = StringUtils.shuffle(this.partner.definirLojasDisponiveis(data.json().listaObjetos));
                                this.tiposOrganizacao.setBanners(randomList);



                                this.tiposOrganizacao.carregarOrganizacaoPadrao(
                                    data => {
                                        this.superService.hideCarregando();
                                        this.tiposOrganizacao.organizacaoPadrao = data.json();
                                        //console.log('Empresa padrĂŁo');
                                        //console.log(this.tiposOrganizacao.organizacaoPadrao);
                                        this.superService.hideCarregando();
                                        this.nav.setRoot(HomeTab);
                                    },
                                    err => {
                                        this.superService.hideCarregando();
                                        // console.log(err);
                                        this.tratamentoErro.exibirMensagemErro(err.json());
                                    });



                            },
                            err => {
                                this.superService.hideCarregando();
                                // console.log(err);
                                console.log("passou 3");
                                this.tratamentoErro.exibirMensagemErro(err.json());
                            }
                        );
                    });

                } else {
                    this.superService.hideCarregando();
                    alert("Autenticação falhou! Verifique login e senha e a sua conexão com a internet!");
                }



            },
            err => {
                // console.error(err.errorMessage)
                // console.log(err.json());
                // console.log(err.json().errormessage);
                this.superService.hideCarregando();
                this.tratamentoErro.exibirMensagemErro(err.json());
            }
            );


    };




    esqueciSenha() {
        this.nav.push(EsqueciSenha);


    }

    termosDeUso() {
        this.nav.push(TermosUso);
    }

    ionViewDidLoad() {
        // O evento "registerBackButtonAction" sĂł Ă© acionado nas plataformas android e windows
        this.platform.registerBackButtonAction(() => {

            let activePortal = this.ionicApp._loadingPortal.getActive() ||
                this.ionicApp._modalPortal.getActive() ||
                this.ionicApp._toastPortal.getActive() ||
                this.ionicApp._overlayPortal.getActive();

            // Existe mais alguma pagina para a qual se possa voltar?
            if (this.nav.canGoBack() == false) {
                let mensagem: string = "Deseja fechar o aplicativo?"

                if (this.carrinho.itens.length > 0) {
                    mensagem = 'Existem itens no seu carrinho. Se você sair, sua compra será cancelada. Confirma?';
                }


                let alert = this.alertController.create({
                    title: 'Sair do Ashey',
                    message: mensagem,
                    buttons: [
                        {
                            text: 'Sim',
                            handler: () => {

                                this.platform.exitApp();


                            }
                        },
                        {
                            text: 'NĂŁo',
                            handler: () => {
                                alert.dismiss();
                                return false;
                            }
                        }
                    ]
                });
                alert.present();


            } else {

                // A janela atual Ă© uma popup?
                if (activePortal) {
                    activePortal.dismiss();
                } else {
                    this.nav.pop();
                }




            }






        }, 101);





    }

    exibirMensagem(titulo: string, mensagem: string) {
        let confirm = this.alertController.create({
            title: titulo,
            message: mensagem,
            buttons: [
                {
                    text: 'Ok',
                    handler: () => {

                    }

                }
            ]
        });

        confirm.present();

    }

    logarComFacebook() {
        this.facebookLogin.login(
            (successCallback) => {

                let accessToken =  successCallback.authResponse.accessToken;               

                this.facebookLogin.getUserInfo(
                    (successCallback) => {

                        let user: any = {
                            email: successCallback['email'],
                            first_name: successCallback['first_name'],
                            picture: successCallback['picture_large']['data']['url'],
                            username: successCallback['name'],
                            password: successCallback['id']
                        }


                        let modaLoginSimples = this.modalController.create(LoginSimples, { dadosUsuario: user });
                        modaLoginSimples.present();

                        console.log(user);

                    }
                );


            },
            (errorCallback) => {

            }

        );

    }

    deslogarFacebook() {
        this.facebookLogin.logout(
            (successCallback) => {
                console.log(successCallback);

            },
            (errorCallback) => {

            }
        );
    }


    logarComGooglePlus() {
        this.googlePlusLogin.login(
            (successCallback) => {

                let accessToken =  successCallback.accessToken;   

                let user: any = {
                    email: successCallback.email,
                    first_name: successCallback.imageUrl,
                    picture: successCallback.imageUrl,
                    username: successCallback.displayName,
                    password: successCallback.userId
                }


                let modaLoginSimples = this.modalController.create(LoginSimples, { dadosUsuario: user });
                modaLoginSimples.present();

            },
            (errorCallback) => {

            }

        );

    }

    deslogarGooglePlus() {
        this.googlePlusLogin.disconnect(
            (successCallback) => {
                console.log(successCallback);

            },
            (errorCallback) => {

            }
        );
    }

    


}

Maybe something weird with the form or the registerBackButtonAction?

Would you like to give a try without these pieces of codes to see if you face the same white screen problem?

Yep. Maybe! I am going to try removing this too… I’m currently building the project again with:

ionic cordova build ios --prod

Cool. Yes --prod is correct, I always do too

1 Like

I removed the whole ionViewDidLoad method and changed my html file to be as simple as:

<ion-content text-center padding>
Test
<ion-content>

But unfortunately a blank screen was still shown. Constructor was also called.

Sh3t sorry to hear that

Did you also remove the this.init() from your constructor?

Difficult to say otherwise, nothing in the console right?

Side node, if that could help, a couple of tips:

Josh Morony how to debug on iOS device https://www.youtube.com/watch?v=9J8AxhDxtTE&feature=youtu.be

10 commons error (maybe you will see something) https://devdactic.com/10-ionic-problems/?utm_content=buffer5ba05&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

1 Like

Thanks @reedrichards! I am going to watch the movie link you sent. And yes I even deleted the contents of every method in ts . No error log in shown on xcode console. Not even in safari.

my god such a weird issue, hope these links helps

your app is open source? could I check it out to have a try?

1 Like

Yep, it’s very weird. Unfortunately the app is not mine.

:frowning:

I hope you will be able to debut it a little bit or that someone will come with a better solution or help!

1 Like

In the last line of safari console you can see the log was fired on constructor. There’s also a “deviceready has not fired after 5 secons” message. But I don’t know if this could be the possible cause for the blank screen.

BTW, I already use to debug the app on iOS the way it’s shown on the video.

Device ready fired after 21sec sounds not that reasonable

Someone just posted kind of the same problem and resolved it by moving an initialization from a constructor to ngAfterViewInit…could that helps you too?

1 Like

I finally was able to fix the problem. The solution was to remove all plugins (one by one) and add them back. There was a plugin (cordova-plugin-add-swift-support) which was not compatible with current Native Geocoder plugin version.

Awesome!

Sorry that I couldn’t help that much and really happy to hear you found a solution

1 Like