Router navigation from alert is canceled

Ionic Framework
1

I am using ionic 4 and @angular/router": “8.1.2”.
I have an alert with an ok button. In the ok button handler I have this navigation:

      handler: data => {
        this.navCtrl.navigateForward("/communication/segment", { state: { page: TAB_VALUES.TASK } });
      }

Somehow the first time after a refresh it works, but the second time when I try to navigate than the navigation is canceled. I already tried to dismiss the alert in the button handler and make the navigation in the onDidDismiss() event, but it has the same effect.
This is my console log when the navigation is canceled:

platform-browser.js:301 Router Event: NavigationStart
index.js:3757 NavigationStart(id: 7, url: ‘/communication/segment’)
index.js:3757 NavigationStart {id: 7, url: “/communication/segment”, navigationTrigger: “imperative”, restoredState: null}
platform-browser.js:301 Router Event: RoutesRecognized
index.js:3757 RoutesRecognized(id: 7, url: ‘/communication/segment’, urlAfterRedirects: ‘/communication/segment’, state: Route(url:‘’, path:‘’) { Route(url:‘communication’, path:‘communication’) { Route(url:‘segment’, path:‘segment’) { Route(url:‘’, path:‘’) } } } )
index.js:3757 RoutesRecognized {id: 7, url: “/communication/segment”, urlAfterRedirects: “/communication/segment”, state: RouterStateSnapshot}
platform-browser.js:301 Router Event: GuardsCheckStart
index.js:3757 GuardsCheckStart(id: 7, url: ‘/communication/segment’, urlAfterRedirects: ‘/communication/segment’, state: Route(url:‘’, path:‘’) { Route(url:‘communication’, path:‘communication’) { Route(url:‘segment’, path:‘segment’) { Route(url:‘’, path:‘’) } } } )
index.js:3757 GuardsCheckStart {id: 7, url: “/communication/segment”, urlAfterRedirects: “/communication/segment”, state: RouterStateSnapshot}
platform-browser.js:301 Router Event: GuardsCheckEnd
index.js:3757 GuardsCheckEnd(id: 7, url: ‘/communication/segment’, urlAfterRedirects: ‘/communication/segment’, state: Route(url:‘’, path:‘’) { Route(url:‘communication’, path:‘communication’) { Route(url:‘segment’, path:‘segment’) { Route(url:‘’, path:‘’) } } } , shouldActivate: false)
index.js:3757 GuardsCheckEnd {id: 7, url: “/communication/segment”, urlAfterRedirects: “/communication/segment”, state: RouterStateSnapshot, shouldActivate: false}
platform-browser.js:301 Router Event: NavigationCancel
index.js:3757 NavigationCancel(id: 7, url: ‘/communication/segment’)
index.js:3757 NavigationCancel {id: 7, url: “/communication/segment”, reason: “”}

Any idea? Thanks.

2

I’m having a hard time thinking of a situation where navigating from a modal would be desired. Can you achieve the desired effect without doing so?

3

Not really. I need to show an alert when the user gets a new task and it is asked if it wants to navigate to the new task. When he/she clicks on the ok button then he/she should be navigated to the new task details page. I don`t see any better solution than a popup.

4

The popup is fine. Why not do the actual navigation from an onDidDismiss handler in whatever created the popup?

5

I already tried something like this.

this.alertCtrl.dismiss({navigation: true});
…
alert.onDidDismiss().then((obj) => {
if (obj.data.navigation) {
this.navCtrl.navigateForward(“/communication/segment”, { state: { page: TAB_VALUES.TASK } });
}
});

I write from my memory this code, hopefully, the syntax is correct. Also, this solution was not working. For the first time, the navigation worked and on the second time, it was canceled.

6

@rapropos If I add a little timeout then it works, but it is an ugly fix. I don`t understand why the navigation is canceled without a timeout.

7

Just found the solution in ionic 3 documentation https://ionicframework.com/docs/v3/api/components/alert/AlertController/ at " Dismissing And Async Navigation" section. I was missing the return false. With the return false I can control the dismissing of alert and the navigation is called after the alert is dismissed. My code looks like this:

    {
      text: 'Ja',
      handler: () => {
        prompt.dismiss().then(() => {
          this.navCtrl.navigateRoot("/communication/segment", { state: { page: TAB_VALUES.TASK } });
        });
        return false;
      }
    }
1 Like