ionic-framework: Missing CanActivate/Resolve Functionality in Ionic2

Short description of the problem:

Need to resolve data before @Page gets rendered.

What behavior are you expecting?

IMHO: Ionics View callbacks onPage* to respect/handle returned promises/observables.

Detailed description of the problem:

Hello,

I’m opening this issue after trying to find a solution/help in the forum, SO and slack. Till now there are good hints for how to work around this issue, but no definitive solution.

As for now the decorator @CanActivate of Angular2 gets not called within Ionic2. Which opens the question what is the correct way to get data async before a Page gets rendered? This issue was posted on the forums, but didn’t get any “solution”.

Apparently Ionic2 does something with the @CanActivate decorator, but its not documented and i can’t figure out what it does exactly.

Nevertheless this guy points out one should use Ionic2 View States instead. His example looks like this:

  onPageWillEnter() { 
      return this._service.getComments().then(data => this.comments = data);
  }

Which looks like he is expecting Ionic to consider the returned promise, but a quick glance at Ionics sources reveals (at least I think so) that the returned value is ignored. Hence there is no guarantee that the promise gets resolved before the page gets rendered. During a discussion on #ionic-v2 I created an example with onPage* and how it does not perform as needed/expected.

Many people suggested to resolve the data before navigating to the page, which burdens the knowledge which data is needed for the page on the callee. This breaks the nice encapsulation of the Angular2 Component in my opinion.

I’m using

Cordova CLI: 6.1.1 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.4 Ionic CLI Version: 2.0.0-beta.24 Ionic App Lib Version: 2.0.0-beta.14 OS: Windows 7 SP1 Node Version: v4.4.2

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 24
Comments: 24 (10 by maintainers)

Most upvoted comments

@Hufschmidt We are currently doing alot of work around navigation. While it is not a rewrite of NavController, as NavController works perfectly for what it is meant to do, we are adding some very cool functionality that should solve this issue. Thanks!

jgw96 on Aug 1, 2016

I agree, it would be cool to have this feature. I’m trying to implement an authenticate system with resticted tab, for the moment I’m listening for onPageWillEnter to redirect if the user is not logged but it’s not really efficient since the page is showed 0,1 sec. If someone know how can I redirect the user before the page is loaded like prevent default…

melkir on Jul 15, 2016

@Luchillo, @mohammadshamma have a look at the navcontroller ionViewCanEnter it does exactly what you are looking for. http://ionicframework.com/docs/v2/nightly/api/navigation/NavController

ataraxus on Feb 27, 2017

Is using ionViewCanEnter really a valid solution for angular’s resolve? As far as I can tell, It is equivalent of angular’s CanActivate, not resolve.

danishin on Oct 25, 2016

@mohammadshamma I think this, as it is always a trade of… either you whitelist or you blacklist. If you dont want to duplicate your auth code, just create a class SecurePage with your ionViewCanEnter and subclass all pages need to be secured. I know its not as common in JS to subclass, I need to get used to it too 😉

ataraxus on May 6, 2017

@ataraxus My criticism is for the fact that there is no cross cutting way of doing the check for every page. My understanding is that I might have to define the ionViewCanEnter for every page that expects authentication gating.

mohammadshamma on May 6, 2017

This has been driving me nuts the last few days, so I’ve gone and implemented this myself.

Since the NavController uses transitions directly instead of the relying on Angular2’s (relatively new) beta-router, I simply delayed the transition to wait until both the promise returned by the ‘entering-view component’ using ‘ionCanActivate(enteringView: ViewController, leavingView: ViewController)’ and the ‘leaving-view component’ using ‘ionCanDeactivate(enteringView: ViewController, leavingView: ViewController)’ both have been resolved or cancel the transition if any Promise fails.

See my modifications, might create a Pull-Request… Currently debating wether to pass the views or the controllers (view.instance) to the ionCan… calls.

Now I can finally implement authentication without relying on workarounds with NavParams or the LoadingController. 😃

Hufschmidt on Jul 25, 2016