Performing action before app start

I’m new to Ionic2 (a week’s worth), and am liking what I see so far. yay!

I have searched for “delay ionic2 start” and “ionic2 lifecycle” but these don’t provide me what I’m after, which is: how might I delay full app “start” (i.e: first page display) until some other code has finished?

My case is configuration. The native storage API’s use promises to load data, so in some cases I need to delay app “showing” until I know that data is loaded.

I tried in app.component.ts constructor:

// Make sure config is loaded first
this.config.loadConfiguration().then(v => {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
});

But still the page I’m loading hits the config service before this executes. I feel I am missing something simple. Could someone please point me in the right direction?

  1. there is something like Promise.all(ArrayOfPromises) --> where you can combine promises-executions :wink:
  2. Check your config.xml if you hide the splashscreen automatically after some seconds
  3. Is there anything that can go wrong in your loadConfiguration function and the promise is rejected? --> if so, please handle the error case :wink:

Thanks for the tips.

  1. I tried:

    constructor(platform: Platform,
    public chargerService: iChargerService,
    public config: Configuration) {

     // Make sure config is loaded first
     Promise.all([
             this.config.loadConfiguration(),
             platform.ready()
         ]
     ).then(() => {
         // Okay, so the platform is ready and our plugins are available.
         // Here you can do any higher level native things you might need.
         StatusBar.styleDefault();
         Splashscreen.hide();
     });
    
     this.pages = [
         // {title: 'Dashboard', component: HomePage},
         {title: 'Presets', component: PresetListPage},
         {title: 'Config', component: ConfigPage},
     ]
    

    }

But it had no effect that I could see. Console shows:

image

In my case, I’ve changed the app so it’s showing a page I’m developing (charger presets). However the presets page appears to load and view before the config is loaded (hence the null values).

The pic shows that the IP address isn’t loaded before the first this.http.get() is done… else the URL wouldn’t be nil. I get that this is kinda hard to see/understand without seeing all the source.

Is this the right place to delay app startup tho?
Is there some other way I should be considering, to delay the app-start?

  1. What keys should I look for to delay splash? I’ve not added anything from the stock xml.
  2. No rejection method is ever called in loadConfiguration. It is unused.

Instead of thinking about “how do I delay app startup”, I would think in terms of “how do I ensure that all my code is structured so that it is robust in the face of various asynchronous events happening in different orders and at different times”.

OK. That’s a fair comment, and I agree. But, if I did want to delay the startup, what is the Ionic2 way of doing that? I agree that for this specific case, a more robust mechanism would be the solution, but I’m curious also to know what I2/ng2 best practice would be to delay the startup, since I’m new to it and trying to learn how things fit together still.

I’m not sure if this is the recommended way to do, but you could use the ionViewCanEnter lifecycle event of your rootPage.
See here for details: https://ionicframework.com/docs/v2/api/navigation/NavController/

I ended up using the following in app.module.ts:

function configServiceFactory(config: Configuration) {
return () => config.loadConfiguration();
}
providers: [
Configuration,
{
provide: APP_INITIALIZER,
useFactory: configServiceFactory,
deps: [Configuration],
multi: true
},

I’d credit the source, but I can’t find it (alas, a long string of somewhat related queries).

And serializing certain operations during startup is never part of a legitimate strategy to achieve that?

It has certain advantages - slightly simplified code, less time spent reasoning about order of operations etc, the tradeoff being potentially slower load time/worse responsiveness.

So surely it depends on the project scope and requirements, dev resources available etc?

Shipping is also a virtue…