Navigation/Routing issues

enchev commented 8 years ago

From @NathanaelA on May 21, 2016 23:41

Did you verify this is a real problem by searching

Yes, this is a combination post describing several issues with the current routing system. @valentinstoychev requested I do this and I am linking to any existing issues in the issue tracker. :grinning:

Tell us about the problem

Current Navigation system has the following issues:

[ ] Inability to cancel a navigate (both forward and back) request via the onNavigatingFrom/onNavigatingTo event handlers see #583, #618
[ ] Inability to reload the current page without affecting history, see: #243, #1087
[ ] Inability to delete a page from the history stack; This needs to be able to happen after loading a page, then I can clear it from the history. backStackVisible is NOT the solution to this, as BSV affects the next page being loaded. If I am on a page and I want to navigate off this page and forget it; I should be able to delete it from the history stack so that it is like the page was never was originally set with BSV. I may not know that page needs to be cleared from the history until they do something on it...
[ ] In ability to add/modify to the history stack, I might want to insert a "Back" page or maybe even completely rewrite the history stack.
[x] Ability to have TabView/dedicated View (new component required) navigation. This might be impossible with the current design. But Having tabs/view be able to be easily loadable via navigation would improve things, with allowing buttons to remain on bottom but page changes..
Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

2.00

Copied from original issue: NativeScript/NativeScript#2162

enchev commented 8 years ago

From @denkomanceski on May 23, 2016 23:29

I think i found another issue regarding navigation/routing. When navigating back from a nested route using android back button it shows the following error

 Error: Uncaught (in promise): TypeError: Cannot read property 'urlPath' of null
JS:     at resolvePromise (/data/data/mk.vertex.instantaxipartner/files/app/tns_modules/zone.js/dist/zone-node.js:496:32)
JS:     at resolvePromise (/data/data/mk.vertex.instantaxipartner/files/app/tns_modules/zone.js/dist/zone-node.js:481:18)
JS:     at /data/data/mk.vertex.instantaxipartner/files/app/tns_modules/zone.js/dist/zone-node.js:529:18
JS:     at ZoneDelegate.invokeTask (/data/data/mk.vertex.instantaxipartner/files/app/tns_modules/zone.js/dist/zone-node.js:314:38)
JS:     at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (/data/data/mk.vertex.instantaxipartner/files/app/tns_modules/@angular/core/src/zone/ng_zone_impl.js:36:41)
JS:     at ZoneDelegate.invokeTask (/data/data/mk.vertex.instantaxipartner/files/app/tns_modules/zone.js/dist/zone-node.js:313:43)
JS:     at Zone.runTask (/data/data/mk.vertex.instantaxipartner/files/app/tns_modules/zone.js/dist/zone-node.js:214:48)
JS:     at drainMicroTaskQueue (/data/data/mk.vertex.instantaxipartner/files/app/tns_modules/zone.js/dist/zone-node.js:432:36)
JS:     at ZoneTask.invoke (/data/data/mk.vertex.instantaxipartner/files/app/tns_modules/zone.js/dist/zone-node.js:384:22)
JS:     at ZoneDelegate.invoke (/data/data/mk.vertex.instantaxipartner/files/app/tns_modules/zone.js/dist/zone-node.js:281:29)
JS: Unhandled Promise rejection: Cannot read property 'urlPath' of null ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'urlPath' of null
JS: Error: Uncaught (in promise): TypeError: Cannot read property 'urlPath' of null

If I navigate to non-nested route (route that does not have another page-router-outlet) it works fine.

Edit: This is when navigating from page-router-outlet to nested page-router-outlet and than going back to the first page-router-outlet. The samples in the nativescript-angular are showing from page-router-outlet to normal router-outlet

Edit2: I modified the nav-component sample from nativescript-angular and the same error is happening so its surely a bug

Edit3: This is also happening if i navigate manually with (tap) and this._router.navigate(['/Start']); which means its not an issue with the android back button

enchev commented 8 years ago

From @Daxito on May 24, 2016 11:46

+1

enchev commented 8 years ago

This issue was moved to NativeScript/NativeScript#2170

rhanb commented 7 years ago

+1

rhanb commented 7 years ago

For the TabViews problem I may find a solution by using outlets from Angular, you can check this out here or here (actually I don't know if you encountered the same problem)

Sample routes:

{
                path: 'home', component: HomeComponent,
                children: [
                    {path: '', redirectTo: 'social', pathMatch: 'full'},
                    {path: 'first', component: FirstComponent, outlet: 'first'},
                    {path: 'second', component: SecondComponent, outlet: 'second'},
                ]
 },

Sample xml of HomeComponent:

<TabView (selectedIndexChanged)="onHomeSelectedIndexChanged($event)" [selectedIndex]="homeSelectedIndex"
         selectedColor="#1083BF">
    <StackLayout *tabItem="{title: 'First'}">
        <router-outlet name="first"></router-outlet>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Second'}">
        <router-outlet name="second"></router-outlet>
    </StackLayout>
</TabView>

Hope it's the solution for your problem

Cheers from France :smile:

SBD580 commented 7 years ago

+1

tedivm commented 7 years ago

Does the fact that this issue was closed in the main nativescript repository mean you only plan on resolving it for the angular side of things?

csaggo commented 7 years ago

Are there any news regarding navigation-canceling? I have a hacky workaround for my current project now but a general process using onNavigatingFrom would make a lot of sense.

TinusJ commented 6 years ago

+1

NickIliev commented 5 years ago

Update: TabView navigation with separate router outlets is now supported.

NativeScript / nativescript-angular