Ionic-framework: Blank screen with Deeplinker and ionViewCanEnter

[FdezRomero]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

If you first load (or reload) a Deeplinker segment and the component's ionViewCanEnter returns false | Promise<false>, the user is left with a blank screen.

Expected behavior:

To pop the view and try navigating to the last component defined in its defaultHistory.

Steps to reproduce:

• Plunker at http://plnkr.co/edit/qdZNmk.
• Please note that the current template uses RC2 and I think it fails to actually block the view from entering due to a bug this version had, and thus this issue is not reproducible directly from the Plunker. But you can see that the relevant code at app/app.module.ts and app/detail.page.ts.
• First-loading (or reloading) the page at /#/detail should deny entry and a blank page would be shown. Or at least it currently does in RC3.

Related code:
See Plunker above.

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0
ios-sim version: 5.0.12
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62

[FdezRomero]

Playing with the Deeplinker a bit more, I found out that it works correctly if the segment of the component you define in defaultHistory is not in the current history and there isn't a rootPage defined at the class-level/constructor.

Examples:

This doesn't work, because the empty segment is present in /#/protected, so it won't navigate and shows a blank page:

export const deepLinkConfig: DeepLinkConfig = {
  links: [
    { segment: '', component: HomePage, name: 'home'  },
    { segment: 'protected', component: ProtectedPage, name: 'protected', defaultHistory: [ HomePage ] }
  ]
};

But if you use a segment not contained in the protected segment, it navigates back from /#/protected to /#/home correctly, as long as you don't have a rootPage already defined in app.component.ts:

export const deepLinkConfig: DeepLinkConfig = {
  links: [
    { segment: 'home', component: HomePage, name: 'home'  },
    { segment: 'protected', component: ProtectedPage, name: 'protected', defaultHistory: [ HomePage ] }
  ]
};

This is just a workaround and the bug still exists, but I'm documenting this finding here in case someone else is having the same problem.

[jgw96]

Thanks for the info!

[jbarbede]

I have the same problem. We definitively need a way to handle that case.

[jgw96]

Hello all! I cannot reproduce this issue anymore with Ionic 3. I am going to close this issue for now but please comment if you are still having the same issue. Thanks for using Ionic!

[glebinsky]

@jgw96 I think I ran into this issue in Ionic 3.

I have a login page that is set as the root page by the app component and, after login, the login page sets the root page to a content page. Then, if I refresh the browser, the app component sets login page as root but the login component is never run. The content component is run and is (rightly) blocked by ionViewCanEnter but I'm stuck with a black page. **Using lazy loading.

If there's a better way of doing it, please let me know.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.