Variety of bugs with ModalDialogService.showModal and navigation

[daveware-nv]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI:
• Cross-platform modules: 5.0.5 (tns-core-modules)
• Android Runtime: 5.0.0
• iOS Runtime: N/A (haven't tested iOS)
• NativeScript-Angular: 7.0.3
• Angular: 7.0.4

Describe the bug
With page-router-outlet:

• Closing a modal that was opened on a page navigated to with skipLocationChange: true, will cause a navigate to the previous page
• Closing a modal that was opened on a page navigated to with replaceUrl: true, will cause a navigate to the previous page
• RouterExtensions.canGoBack() returns true on a freshly opened modal. RouterExtensions.back() will then do nothing, except calling ModalDialogParams.closeCallback() with no longer close the dialog

With router-outlet:

• RouterExtensions.canGoBack() will cause a crash within the modal, and after the modal closes until a navigation action is performed. (TypeError: Cannot read property 'states' of undefined File: "file:///data/data/org.nativescript.nstest/files/app/tns_modules/nativescript-angular/router/ns-location-strategy.js, line: 227, column: 22)

To Reproduce
As above, depending on the bug

Expected behavior

• No navigation should ever occur when closing a modal, the page that the modal was open from should be there, unchanged.
• RouterExtensions.canGoBack() should never crash
• RouterExtensions.back() shouldn't break the modal closing functionality

Sample project

https://play.nativescript.org/?template=play-ng&id=oXY9vP&v=3

This is setup for the page-router-outlet cases, unfortunately I haven't tested this 'play' since I don't have a device with the app installed on it, I tried to copy the relevant bits from my local test app though. So it should be close. It has three pages with buttons for moving forward between them. The android back button is being redirected to RouterExtensions.back() (see app.component.ts)

You'll have to change the page-router-outlet to router-outlet to test that bit (don't forget to add {createFrameOnBootstrap: true} to the bootstrap)

[tsonevn]

Hi @daveware-nv,
There are some differences between the page-router-outlet and the router-outlet and its usage in the NativeScript Angular project. You can check the article here. Regarding the usage of skipLocationChange and replaceUrl: true while navigating with the Angular router in the page router. Those options are not supported in NativeScript angular and we cannot ensure, what the behaviour will be when you add them on navigation. I would suggest using our router extension and the clearHistory option when you need to remove a page from the navigation history. It will help if you can provide some more info about your scenario and what you are trying to achieve as a final result.

Regarding the crash of canGoBack , I found that this is caused by setting the native cancel property to false, before checking if the back navigation is possible. This cancel option should be used, when you need to disable the back navigation with the hardware back button at all or if you need to disable the back navigation in specific scenarios.

[daveware-nv]

Context: I discovered this pile of problems while trying to upgrade a NS 3.3 app to NS 5.0. The initial problem was the router-outlet canGoBack crash, the rest was discovered while trying to work around this problem.

Hi @daveware-nv,
There are some differences between the page-router-outlet and the router-outlet and its usage in the NativeScript Angular project. You can check the article here. Regarding the usage of skipLocationChange and replaceUrl: true while navigating with the Angular router in the page router. Those options are not supported in NativeScript angular and we cannot ensure, what the behaviour will be when you add them on navigation. I would suggest using our router extension and the clearHistory option when you need to remove a page from the navigation history. It will help if you can provide some more info about your scenario and what you are trying to achieve as a final result.

Are you saying that skipLocationChange: true and replaceUrl: true are not supported in Nativescript-Angular at all? I haven't seen this mentioned in the documentation, and it is a little disconcerting for it to mostly work (or back in 3.3 completely work) and then be told its not supported when raising an issue.

Regarding the crash of canGoBack , I found that this is caused by setting the native cancel property to false, before checking if the back navigation is possible. This cancel option should be used, when you need to disable the back navigation with the hardware back button at all or if you need to disable the back navigation in specific scenarios.

I'll reiterate point one of expected behaviour:

• RouterExtensions.canGoBack() should never crash

This is a state check, there is no good reason for there to be caveats for when it can be called.

Regarding cancel I assume you are talking about the application.AndroidApplication.activityBackPressedEvent args property? The crash occurs regardless of how cancel is set in this scenario, however for my particular uses I have always set it to true before calling RouterExtensions.canGoBack() in application.AndroidApplication.activityBackPressedEvent. So as far as I can tell your statement here is not accurate.

(edited for spelling)

[daveware-nv]

Update on router-outlet behavior for 5.2

• RouterExtensions.canGoBack() no longer causes a crash
• router-outlet has now inherited the bug from page-router-outlet where closing the modal will cause an erroneous back navigation when replaceUrl: true or skipLocationChange: true is used. (Even though with replaceUrl said route should no longer even be in the history)
• RouterExtensions.back() still breaks modals even though RouterExtensions.canGoBack() returns true.

So still can't upgrade to NS5+.

I'm not particularly interested in the page-router-outlet so I haven't checked that one.

[slolam]

@daveware-nv, did you find any work around fir this issue. My app too is facing the same issue of randomly navigating to a previous screen after a modal dialog is closed. Although all my navigation are done with clearHistory set true, still somehow it goes back. All this while I was on 4.2 used to work like charm, now due to iOS 13 I have to upgrade the framework to 6.1.1 and everything messed up.

[daveware-nv]

@slolam I don't really have good news. The issues I described here required me to make large changes to the application, I essentially created my own router that sat on top of the angular one and used that instead.

But if you aren't using skipLocationChange or replaceUrl you might be running into one of the other navigation issues that have been introduced since 3.x/4.x. I vaguely recall having one that occured if I tried to navigate during the promise resolution from a modal i.e.

this.modalService.showModal(...).then(() => {
    this.router.navigate(..., {clearHistory: true})
});

Which I resolved by wrapping the navigate in a setTimeout

this.modalService.showModal(...).then(() => {
    setTimeout(() => {
        this.router.navigate(..., {clearHistory: true})
    }
});

Unfortunately it has been many months so I can't remember all the details of problems I encountered with angular routing/modals since NS post 3.x/4.x, and this is all from memory so I apologize for any inaccuracies.