Yet another blank screen issue (iOS)

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

No need to be sorry. Thank you for your attention.

2 Likes