Configuring the root page in an ionic2 and angular2 application based on an asynchronous event

Question

I am trying to run the basic ionic2 application and wondered if my loading time of the original application is a problem or not. What I would like to do is set the start page on the login page if the user is not authenticated.

I initially set the root page to the home page, and then when the asynchronous call returned from localstorage, I would then reset the root page to the login page if the user was not authenticated. However, this caused flickering when they see one page and then go to another page.

It seems that what I want to do is wait for the local storage to be called before I show any screen.

My question is this: as the code stands now, will there be an error condition when the platform is ready to work before the root page is installed, which will cause some kind of problem? How should I handle this situation in Ionic 2 and Angular 2? Should I force a localStorage synchronous call or use it in another event or method that is part of the life cycle of an application or page in Angular 2?

Should I use some kind of observable or pending syntax?

export class MyApp { rootPage: any; local: Storage = new Storage(LocalStorage); constructor(platform: Platform) { this.local.get('user').then(user => { if (user) { this.rootPage = TabsPage; } else { this.rootPage = LoginPage; } }); platform.ready().then(() => { // Will this ever fire before the rootpage is set? StatusBar.styleDefault(); }); } } 

Answer 1

You do not need to add an asynchronous call to local storage, as you can see in this example: https://github.com/RedFroggy/ionic2-nfc-app/blob/master/app/app.ts#L52

You just need to check the user’s existence in local storage and install rootPage in HomePage or LoginPage.

Answer 2

You can create a fictitious start page (i.e. a white background, preinstall anything) to avoid flickering, and then go to the login page or tabs.