Conditional rootPage in Ionic 2 RC0

Ionic Framework ionic-v3
1

Has anyone successfully created a conditional rootpage?

I’ve tried the following

rootPage: any;

constructor(
    public platform: Platform,
    public menu: MenuController) {
    let storage = new Storage();

    this.storage.get('token).then(data =>{
        data? : this.rootPage = WelcomePage : this.rootPage = LoginPage;
   })
    this.initializeApp();

}

as well as rootPage = null and trying the storage call in platform.ready() but all attempts white page the app.

Since the app page loads before my auth service, I can’t do something like

rootPage: any;

constructor(
    public platform: Platform,
    public auth: AuthService,
    public menu: MenuController) {

    auth.token? : this.rootPage = WelcomePage : this.rootPage = LoginPage;
    this.initializeApp();

}

I’m not sure but I think I was able to get away with this in beta 11.

Anyone get something to work?

2

With an auth Service you can do something like this :

auth.subscribe((user) => {
      if (user) {
        // If there's a user take him to the home page.
        this.rootPage = HomePage;
      } else {
        // If there's no user logged in send him to the LoginPage
        this.rootPage = LoginPage;
      }
    });
3

You mean by changing the route in the provider?

4

No. This code is actually in my app.component.ts. But i do not open a page before having a response from my auth provider to check if the user is connected or not.

5

That’s what I tried doing but I’d get white screened.

6

Yes I’m having the same problem now…
Since I’m using promise controllers on my login page, once user saved his data, next time he loads app it should proceed next page but than as soon he gets there it loads data and give white screen.
This seems to be a problem on ios device…on android all works fine else it throw that another promise is already active…

I think this is very important to handle and maybe we should do more research about angular functions cycle times.

Also I noticed that it loads twice ngOnInit() for a root page that is set…

7

@aurbina83 I’m assuming the HTML related to the component you showed has an ion-nav. What worked for me was to get the reference to the NavController and define the root page in it. Something like this:

@Component({
	selector: 'my-app',
	templateUrl: 'app.component.html',
})
export class MyApp implements AfterViewInit {
	@ViewChild('myNav') contentNavCtrl: NavController;

	public ngAfterViewInit() {
		this.retrieveUser().then(
			isLogged => this.defineMainPage(isLogged) 
		);
	}

	private retrieveUser(): Promise<boolean> {
		//change it
		return Promise.resolve().then(
			() => setTimeout(() => (Math.random() < 0.5), 3000)
		);
	}

	private defineMainPage(isLogged?: boolean) {
		let mainPage: any = isLogged ? NavPage : HomePage;
		this.contentNavCtrl.setRoot(mainPage);
	}
}

Take into account that the NavController is not injected in the constructor, but a reference to the ion-nav child component. I use ngAfterViewInit instead of ngOnInit to make sure that the contentNavCtrl is already defined. In my HTML page, the ion-nav is similar to this:

<ion-nav #myNav></ion-nav>

You can also display a default loading page initially, something like a splash screen, while the main page is not defined, and a error page in case something happens (or handle the error, if possible).

8

This is what I was doing before. I had a loading page as the root page which would determine whether to go to the login page or not.

I wanted to do it on the app page to speed things up, as well as to help waking up my app from a notification and routing to specific pages without being overridden by the app startup process.

I was able to work my way around this.