Ionic-framework: Modal / Loading / Alert Controller inside a singleton Service

[nickwinger]

I have a issue with beta 11.
I guess it relates to using the LoadingController inside a service but not a Component.
What's the best practive way to do this ? I guess this is a common wish:
I have an Ajax-Service which i register as a singleton inside app.ts at the bootstrap function.
So i can inject it everywhere i need it.
Inside the Ajax-Service, everytime i do certain Ajax-Requests i show a Loading.
I guess when the LoadingController gets injected into the Ajax-Service at the bootstrap, there is no nav/view whatever, therefore i get the error.
But is it good practice to inject a new Ajax-Service into every Component, instead of sharing a singleton in memory, just to get the current nav ?
Before beta-11 everything worked fine, as i was using app.getActiveNav inside the ajax-Service and therefore had a reference to the active nav to present the loading (and modals, alerts, etc.)
Another sidenote: the Ajax-Service is also used inside other singleton (i have a so called RootModel (or UnitOfWork if you will)) and there it's only @Injectable where you cannot register providers...

Please help me out of here, i have no clue what's the way to do it now, but i guess it's a common thing to have a Singleton-Ajax-Service displaying alerts, loadings etc.

Thanks.

[jgw96]

Hello! Thanks for opening an issue with us! Unfortunately I cannot seem to reproduce this issue. I have created a repo here that shows what i am doing to try to reproduce this issue. Is this similar to what your doing in your app?

[nickwinger]

Hi,

i have tested your repo. If you open the home.ts file and put the line this.ajax.showLoading();
into the constructor you will see the error.

So it seems to be an issue when something is not yet ready...
Is there a way to check in the loadingController if it is ready ?

I'm doing ajax calls right in the constructor.

If i call this.ajax.showLoading(); inside the the ionViewLoaded, there is no error, but the loading does not appear.

[jgw96]

Hello! So anything that uses nav's or anything ui related (such as presenting an overlay component) should be done in ionViewDidEnter as my repo shos, as this is the lifecycle event that is fired when a view is full enabled and initialized. It is also recommended that you not do anything in the constructor of a component as it delays initialization of the entire component. Doing things like ajax calls in ionViewDidEnter will also improve performance as the component will be able to fully init and render without any delay. While this may have worked in the past it actually shouldn't have, but thats why were beta 😃 . Hope I explained all this well!

[Kobzol]

This could also appear in the docs about the navigation :-)

[TheBrockEllis]

Hi there!

This is really the first I am hearing about the ionViewDidEnter and using it for UI or presenting overlays. Is there a clear-ish cut definition of what should be used in the component constructor and what should be used in the ionViewDidEnter?

[jgw96]

@Kobzol would you mind opening an issue here about adding docs for this? Thanks! @TheBrockEllis I would recommend that nothing be done in the constructor of a component. Anything that is related to the ui such as presenting overlay components such as an alert, loading, modal, popover, actionsheet and any other component with a present() method should be done in ionViewDidEnter. I also recommend that any data fetching be done in ionViewDidEnter for perf reasons. Also, as this issue should be solved now i will be closing this issue, but feel free to reply if anybody still has any issues with this and I will happily reopen. Thanks for using Ionic everyone!

[Kobzol]

I added the issue to the ionic-site.

[WhatsThatItsPat]

@TheBrockEllis & @Kobzol

Something to note; the idea of lifecycle hooks vs. constructor use isn't Ionic specific. You'll also find details in the Angular 2 docs (though those are Angular's hooks and Ionic has custom ones in addition).

Either way, good reading at The ngOnInit Lifecycle Hook and Lifecycle Hooks.

[Kobzol]

I do realize that, although I'd say that a lot of users use (or will use) Ionic 2 without prior (or standalone) knowledge of Angular 2 and it wouldn't hurt to have this in the docs :-) We'll see if the issue on the ionic site will get any discussion.

[TheBrockEllis]

I would have to agree with @Kobzol. Many new users (myself included) of Ionic will not know the in-and-outs of Angular so these little details will fall through the cracks. Angular knowledge will be absorbed through osmosis as you use Ionic, but anything that can be done to help differentiate the two technologies, since they are so intimately intertwined, would be of great benefit to newcomers.

I'd really love to see some kind of "Angular or Ionic?" callout inside of the docs that could be used to bring attention to specific areas that are either Ionic specific or Angular specific with links to additional reading. If anyone else thinks something like that may be useful, I'd be willing to do any of the grunt work possible to make it happen.

Thanks so much for your help everyone!

[nickwinger]

@jgw96 Actually i have to do it in the ionViewLoaded because this initialization should only happen once, where as ionViewDidEnter is called every time the view gets entered ?
Another thing is that the ajax call in ionViewDidEnter is only executed if i do a setTimeout. If i don't do the setTimeout, the ajax calls never are made. Don't know why.

[jgw96]

Hello @nickwinger ! You can set a variable in your ionViewDidEnter so that your logic only gets called once. Something like this should do the trick for you:

public runFirst: boolean = false;
constructor() {};
ionViewDidEnter() {
  if (!runFirst) {
     //do cool stuff
     runFirst = true;
  }
}

Also, the second issue you mentioned is actually already fixed in master. Sorry for any hassle it causes!