nativescript-angular: Navigation broken with closing modal

Hi i’d like to see this re-opened as the issue is not solved in the comment from @tsonevn . This is not about navigating from within a modal. This is specifically about navigating after closing a modal in the callback.

Please pay special attention here, this is not about nested inner navigation within the modal.

this.modal.showModal(ModalComponent, options).then(result => {
 this.RouterExtensions.navigateByUrl(`/other-route`, { clearHistory: true });
})

The above example would navigate to other-route and then immediately back to the original page.

I very closely followed the example from the documentation (including a root modal view with a router-outlet) and the problem still persists.

Putting the navigation in a timeout is an OK workaround:

setTimeout(() => {
	this.RouterExtensions.navigateByUrl(`workout-preview/${userWorkoutId}`, { clearHistory: true });
}, 50);

No I already tried… it cannot be worked around…Either using modal root component or using router.navigate into a setTimeout make reloading a lot of stuff… As you said…I suppose NS is progressing…but angular integration is hard…especially when dealing with huge shared app. Modal View can only be used when you have a simple app with no sub modules children routes etc … once you get a redirect in the router sub tree it’s dead. So I will simply don’t use anymore modal view. If you have a robust solution please share it 😉

I stumbled on this issue today and I can confirm it is alive and well. I tweaked the modal view playground to demonstrate what’s happening. If you click on the “Modal Search” button and then “Close Modal” it should navigate you automatically to the Item page, but without the timeout it navigates to the Item page and immediately back to the featured (root) menu: https://play.nativescript.org/?template=play-ng&id=oSCxPW&_ga=2.122414274.83672253.1554751882-1553031162.1550619485 Can we please reopen and fix this?

I also ran into exactly what @rohanrichards describes. Also can verify that wrapping the route in a setTimeout is a workaround.

My guess is that the explicit route in the modal close callback gets called taking you where you want to go, but then shortly after that another implicit route gets called triggered from the modal close (not defined in the callback) taking you back to the route that sent you to the modal in the first place.

same problem here. i put the navigation in a set time out and it works

setTimeout(() => {
                    this.router.navigate(['myPage']);
                }, 0);

This issue still persists today, and for me I could not fix it with a setTimeout as it would then affect every single other modal I’d close (I’d get a navigation after any modal is closed). I have temporarily worked around this by setting a CanDeactivate guard that prevents navigation if a local variable is set, which I had to set after closing any modal on the site. There is clearly something going wrong with the Router states, but I couldn’t resolve it that way as I couldn’t figure out what the issue is.

Can confirm, still an issue.

Same thing here, navigating on the “then” of the openModal causes the bug that its navigating to the page and then navigates back after few seconds , and setTimeout did the trick but i hoped that there is a best solution …

@lostation I consider our two apps quite complex - they have routes, child routes and we do rely on modals a lot. That being said I don’t know anything about your use case. For anyone to help you, first we need to see some code.

@tsonevn thank you for your reply, I cannot tell if they are related, but definitely seems possible. I will find it hard to get time to create a sample project in the immediate future, but will post here when I can get to it.

Alright thank you, i will look into it! Can be closed then 😉

The sample project is: https://github.com/PoC-Consortium/burstcoin-mobile The modal in the accounts tab when trying to add new accounts.

Code: https://github.com/PoC-Consortium/burstcoin-mobile/blob/master/app/views/tabs/accounts/accounts.component.ts https://github.com/PoC-Consortium/burstcoin-mobile/blob/master/app/views/tabs/accounts/add/add.component.ts