What is the equivalent of "resolve" in ionic?

Over a month and still no answer from any of the ionic team. Resolves are kind of crucial if you are building an app. And since ionic doesn’t use the Angular 2 routes we can’t implement resolvers the way it works with Angular 2 routes

...
@Injectable()
export class TransactionResolver implements Resolve<any> {
  constructor(
    private transactionService: TransactionService
  ) {}

  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    return this.transactionService.getById(route.params.id);
  }
}

Can anyone of you guys (@brandyshea, @mhartington, @danbucholtz) please point us in the right direction?

@agustinhaller,

The way to go is to just load data or equivalent before or after entering a page, just like you would in a native app.

Thanks,
Dan

1 Like

Is the same ionic 2 ionViewWillEnter vs angular 2 resolves?

No. It’s similar to ngAfterContentInit(), but it is not the same. There are no resolves or guards in Ionic routing currently.

Would you not call ionViewCanEnter a guard?

Based on all the annoyed comments I’ve seen on Github, there’s a gap between what Angular 2 guards do, and the current functionality of IonViewCanEnter. Concerns that the docs are not accurate, lots of other things. I’ve intentionally stayed away from it until it stabilizes, because it seemed to be under active development event after 2.00 final. So while you’re technically right, it doesn’t look as though reality has caught up to you yet.

In the past I sometimes passed complete data objects to pages as a parameter.

Then I changes that to only pass the ID of objects and let the pages fetch the relevant data or data streams.

One possible advantage might be to have a straight forward mapping the the deep link pattern.

So from that perspective, fetching the data and then passing all of it to the page does not seem to be a lean approach to me.

As I see it there is quite some work going on in terms of deep linking and auto-generating this process.
I am already using the lazy loading process for all the pages in one of my applications and the auto generated deep links based on the page names do work nicely. I don’t yet know how that changes when passing data and what the intention is for the future. It might however play a role when it comes to the decision if a Resolver and Guard might be desired or not. :slight_smile:

I concur with Aaron in seeing other people having difficulties with the difference in concept/implementation between Angular and Ionic.

Just wanted to share my perspective and open it for discussion. friendlysmile

My use case was that I had to load some data for all the pages in my app before showing any page.
I manages to do this with a ionViewCanEnter hook on my tabs page. ( I use tabs and this is the only ionic Page component that they all have a a parent.

Returning a promise that always resolves (after putting the data in a service off course;-) worked out fine.

It seems a a bit of a misuse of guards (although my concern is strictly in the naming , resolve seems to fit the usecase better)

But it works!

I’m searching for a solution on the same thing too. Is there any new update on this in Ionic 3?

In LifeCycleEvents of NavController of Ionic, events ionViewCanEnter and ionViewCanLeave allow to return a promise. The page will be loaded only when the promise resolve which allow to load async datas in this promise (e.g. get an entity from the id in params). In addition, if the method returns false or a promise that throw an error, the page is not loaded

   constructor(private myEntityProvider:EntityProvider, private navParams:NavParams){ }

   ionViewCanEnter(){
      let id = this.navParams.get('id');
      return this.myEntityProvider.getOneById(id)
        .pipe(map(c=>this.myEntity=c))
        .toPromise()
    }

Note that at this point of the lifecycle of the page, the blank template is not displayed, which allows to display a much more pretty loading state that making something in the constructor or in another event.

1 Like

This example worked for me, thanks.
I have to extend it to chain two promises as I had two requests for data.
First time using promises.

constructor(public navCtrl: NavController, public navParams: NavParams,
    private issueService: IssueService) {
      this.issueId = this.navParams.get('issueId');
  }

ionViewCanEnter() {
    return this.issueService.getIssue(this.issueId).pipe(map(issue => {
      this.issue = issue;
      return this.issueService.getIssueResources(this.issueId).pipe(map(resources => {
        this.resources = resources;
      })).toPromise();
    })).toPromise();
  }