Page navigate but UI is not loading.!

Ionic Framework ionic-v3
1

in this bunch of code app navigate to MapPage butblank page appers not only map page in to any pages.

   this.navCtrl.push(MapPage, { UDI: this.UID, Token: Token });
   this.navCtrl.setRoot(MapPage ,{ UDI: this.UID, Token: Token });
   this.navCtrl.popToRoot();

import { Component } from '@angular/core';
import { Platform, AlertController, NavController } from 'ionic-angular';
import { LoginService } from '../../providers/login-service';
import { Http, Response } from '@angular/http';
//import { NativeStorage } from 'ionic-native';9903601
import { DashboardPage } from '../dashboard/dashboard';
import { MapPage} from '../map/map'
import 'rxjs/add/operator/map';

@Component({
    selector: 'page-login',
    templateUrl: 'login.html',
    providers: [LoginService]
})
export class LoginPage {
    public UID: any;
    masks: any;
    public phoneNumber: any = "";
    public Token;
    public data;

    constructor(public platform: Platform, public navCtrl: NavController, public loginservice: LoginService, public http: Http, public alertCtrl: AlertController) {
        this.masks = {
            phoneNumber: ['+', '9', '1', '-', /[1-9]/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
        };
    }

    ionViewDidLoad() {
        this.GetUID();
    }

    GetUID() {
        this.loginservice.UIDload()
            .then(data => {
                this.UID = data;
            });
    }

    GetActivation() {
        this.http.get('http://mydomain/sendverification/' + this.UID + '/' + this.phoneNumber + '/' + 'android1')
            .map(res => res.text())
            .subscribe(data => {
                this.data = data;
                this.data = this.data.replace(/\n/g, "");
                this.data = this.data.replace(/\t/g, "");
                let alert = this.alertCtrl.create({
                    title: "4 digit activation code sent to you",
                    inputs: [{
                        name: 'activationcode',
                        placeholder: 'activation code'
                    }],
                    buttons: [{
                        text: 'next',
                        role: 'next',
                        handler: data => {
                            this.http.get('http://mydomain/chekverification/' + this.UID + '/' + data.activationcode)
                                .map(res => res.text())
                                .subscribe(Token => {
                                    console.log(Token);
                                    this.navCtrl.push(MapPage, { UDI: this.UID, Token: Token });
                                    this.navCtrl.setRoot(MapPage ,{ UDI: this.UID, Token: Token });
                                    this.navCtrl.popToRoot();
                                });
                        }
                    },
                    {
                        text: 'retry',
                        role: 'retry',
                        handler: data => {
                            this.GetActivation();
                        }
                    }
                    ]
                });
                alert.present();
            });
    }

}
2

Where and how are you testing?

3

Also, why are you pushing the page, then setting the root and popping to root?

Setting the root and popping (I’m unsure if setRoot also navigates to that page) should be sufficient without the navCtrl.push call.

4

solution:
only if I use this line:
this.navCtrl.setRoot(MapPage ,{ UDI: this.UID, Token: Token });
it is enough.

5

Why don’t you want LoginService to be an app-wide singleton?

6

@rapropos This is not what I don’t want, in fact I dont know how. I am newbie to coding and there is no much time what I’ve learned is from this site, your helps and googling.

Thank you for Everyone.

Also now I moved the fallowing parts in to login-service.
but the problems happen is that functions return value later and program continue to next lines of codes and always error allert shown.

GetActivation(UDI, phoneNumber) {
		return new Promise(resolve =>
			this.http.get('http://mydomain/sendverification/' + UDI + '/' + phoneNumber + '/' + 'android1')
				.map(res => res.text())
				.subscribe(data => {
					data = data.replace(/\n/g, "");
					data = data.replace(/\t/g, "");
					resolve(data);
					console.log(data);
				}));
	}
	
	GetToken(UDI, activationcode) {
		return new Promise(resolve =>
			this.http.get('http://mydomain/chekverification/' + UDI + '/' + activationcode)
				.map(res => res.text())
				.subscribe(Token => {
					resolve(Token);
					console.log(Token);
				}));
7

  • Eliminate the providers array on this component. Add LoginService to the providers array of the app module. Then it will be an app-wide singleton.

  • Don’t explicitly instantiate Promises.

  • “functions return value later and program continue to next lines of codes” is not a problem. That is reality, and until you change your thinking to embrace it you are going to get frustrated and nothing is going to work as you expect.

So:

getActivation(udi: string, phoneNumber: string): Observable<string> [
  return this.http.get(url).map((rsp) => {
    let rv = rsp.text();
    rv = rv.replace(/\s/, '');
    return rv;
  });
}

getToken(udi: string, activationCode: string): Observable<string> {
  return this.http.get(url).map(rsp => rsp.text());
}

Whenever you call either of these, you must subscribe to their result and only inside that subscription can you do anything with the data that has come from the server. Nowhere else. Not further on in the function you call getToken() from.

1 Like