page-router-outlet, router-outlet, RadSideDrawer and ideal route setups #343

NathanWalker · 2016-07-13T14:18:47Z

I'm not sure if this should be reported on nativescript-ui repo since it's somewhat related to v3 router but also to RadSideDrawer. Please view the 2 following videos when possible.

Current issue that would be great if some sort of workaround were available:
https://www.youtube.com/watch?v=ORmWJuRYMHE

Ideal route setup that I hope will be supported when the v3 routing support is complete here?
I would like to know if I can do the following and/or if a workaround exists for me to get it working (this would be preferred over the above so if this can be done, the above can be ignored):
https://www.youtube.com/watch?v=jtF7TjlxM8I

ntrp · 2016-07-13T16:26:50Z

Have you tried adding a layout around page-router-outlet? I have a similar setup here. At the moment I am using router-outlet but I tried with page-router-outlet and the app starts with bindings activated and working.

Anyway if using page-router-outlet the drawer doesn't open anymore after changing page for the first time..

NathanWalker · 2016-07-13T20:12:09Z

A layout around page-router-outlet makes no difference for me unfortunately. I'm using rc4 and beta.2 of v3 router.

NathanWalker · 2016-07-13T20:56:43Z

http://stackoverflow.com/questions/38225358/angular2-router-cannot-find-primary-outlet-to-load-homecomponent I feel like based on that, it would appear that if the sidedrawer is in process of rearranging the layouts at time the router is trying to find the router-outlet maybe thats the issue? idk.

vakrilov · 2016-07-15T10:45:01Z

Hey, @NathanWalker.
I had a similar issue with the "cannot find primary outlet to load XXX component" exception. Only it occurred when going back to a page that has <router-outlet> and the underlying reason is described here angular/angular#7757.

There is a hacky fix in the <page-router-outlet> code in this branch that you might try to see if it work in your scenario.

matt4446 · 2016-07-23T20:01:09Z

hmmm hacky version. I'm Trying to use the router-outlet in the side-drawer main content as well. Im pretty sure I have copied in that branch. ~~I'll try it again~~. Still the same issue.

JS: Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
JS: EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'OverviewPage'
JS: STACKTRACE:
JS: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'OverviewPage'
JS:     at resolvePromise (/data/data/org.nativescript.AcsDashboard/files/app/tns_modules/zone.js/dist/zone-node.js:496:32)
JS:     at /data/data/org.nativescript.AcsDashboard/files/app/tns_modules/zone.js/dist/zone-node.js:473:14
JS:     at ZoneDelegate.invoke (/data/data/org.nativescript.AcsDashboard/files/app/tns_modules/zone.js/dist/zone-node.js:281:29)
JS:     at Object.NgZoneImpl.inner.inner.fork.onInvoke (/data/data/org.nativescript.AcsDashboard/files/app/tns_modules/@angular/core/src/zone/ng_zone_impl.js:46:41)
JS:     at ZoneDelegate.invoke (/data/data/org.nativescript.AcsDashboard/files/app/tns_modules/zone.js/dist/zone-node.js:280:35)
JS:     at Zone.run (/data/data/org.nativescript.AcsDashboard/files/app/tns_modules/zone.js/dist/zone-node.js:174:44)
JS:     at /data/data/org.nativescript.AcsDashboard/files/app/tns_modules/zone.js/dist/zone-node.js:529:58
JS:     at ZoneDelegate.invokeTask (/data/data/org.nativescript.AcsDashboard/files/app/tns_modules/zone.js/dist/zone-node.js:314:38)
JS:     at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (/data/data/org.nativescript.AcsDashboard/files/app/tns_modules/@angular/core/src/zone/ng_zone_impl.js:37:41)
JS:     at ZoneDelegate.invokeTask (/data/data/org.nativescript.AcsDashboard/files/app/tns_modules/zone.js/dist/zone-node.js:313:43)
JS: Unhandled Promise rejection: Cannot find primary outlet to load 'OverviewPage' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find primary outlet to load 'OverviewPage'

Main template:

<template drawerMain>
          <StackLayout>
              <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
              <Button text="OPEN DRAWER" (tap)=openDrawer()></Button>

              <StackLayout>
                    <router-outlet></router-outlet>
              </StackLayout>
          </StackLayout>
</template>

lukabers · 2016-07-31T13:58:48Z

+1 Same problem here with Router-Outlet

vakrilov · 2016-08-01T15:21:01Z

Currently the RadSideDrawer and the [page-]router-outlet are not working well together. We are in the process of clearing that out.

Here is the mirror issue in the nativescript-ui samples repo: telerik/nativescript-ui-samples-angular#13

VladimirAmiorkov · 2016-08-05T13:52:14Z

Hi @NathanWalker @lukabers @matt4446 ,

The mentioned by @vakrilov issue has already being fixed and is going through internal tested. If all is well you can expect the fix for it available in the next official version (1.2.0) of nativescript-telerik-ui/nativescript-telerik-ui-pro which is expected to be released by the end of next week (12 August 2016).

NathanWalker · 2016-08-08T18:17:52Z

Thank you @VladimirAmiorkov I could not be more excited to see a fix for this land 👍

matt4446 · 2016-08-15T19:30:13Z

'router-outlet' seems to play nicely with the current versions.

"tns-core-modules": "next",
"nativescript-angular": "next",
...
"nativescript-telerik-ui-pro": "~1.3.1",

There are some changes to the content selectors as well:

https://github.com/telerik/nativescript-ui-samples-angular/blob/release/sdkAngular/app/sidedrawer/getting-started/getting-started.component.html

shripalsoni04 · 2016-08-16T10:15:46Z

I have the similar setup mentioned by @NathanWalker at https://www.youtube.com/watch?v=jtF7TjlxM8I and now it works without any error 👍 .

But I am experiencing one issue of removal of child component in router-outlet on page navigation.

Please check below .gif describing the issue.

Here, in root component, I have a page-router-outlet. I have two pages: Main Page and Details Page. The Main Page contains router-outlet and we can navigate to child components using Side Drawer.

Now, the issue is when we navigate from Main Page to Detail Page, the child component in router-outlet is getting destroyed and due to that when we navigate back, it is getting recreated.

It will be great if anyone know any solution or work-around to cache the active child component in router-outlet when page navigation happens.

ghost · 2016-08-19T02:05:14Z

please can you share code with me

NathanWalker · 2016-08-21T23:51:44Z

I got this working, thanks again for the fix.

ghost · 2016-08-23T02:06:24Z

@NathanWalker please can you share code i really need it .

NathanWalker · 2016-08-23T03:32:15Z

@mostafa-raafat https://gist.github.com/NathanWalker/e8f4f7c42af04fc725764a9867936e3d

tomylee001001 · 2016-08-23T07:39:46Z

@NathanWalker thanks for the sahre

VladimirAmiorkov · 2016-09-07T15:05:44Z

@shripalsoni04

I tested the described issue on both android and iOS and was able to observe it only on iOS. It looks like there is an issue of how backwards navigation with router-outlet is handled on that platform or it might be present on android also but it may be hidden by the built-in navigation fede-in animation. Maybe you should report this in the nativescript-angular repo which handles the core implementation of the Angular 2 renderers.

EddyVerbruggen · 2017-02-10T10:36:12Z

@shripalsoni04 @VladimirAmiorkov Was that master-detail-navigation-destroys-the-master issue ever fixed, or do you have a workaround? I have the same issue on both iOS and Android..

UPDATE: fixed it, really happy now with how the sidedrawer works in my app. I can navigate a few levels deep (and go back without the master being destroyed) and can even pop back to the root with .navigate(['/'] (haven't seen that documented anywhere though).

The key was adding a router-outlet in the menu, and for every menu item that needs a navigation stack add page-router-outlet as the first child.

murphmar · 2017-03-08T17:41:19Z

Has anyone using this setup had any luck on Android? I can get everything working great on iOS using the above examples, but not the case on Android. Once I navigate to a detail page I can never go back to the original home page, the app just dies. I'm left with with an empty outlet and a sidedrawer that doesn't work, with no errors thrown.

murphmar · 2017-03-10T12:43:24Z

To update my last comment, the issue was enabling showOverNavigation. Works fine on iOS, doesn't work on Android. When you go back to the home route on Android it breaks everything. I just stripped that out.

cindy-m · 2017-05-03T12:43:03Z

@EddyVerbruggen navigation also breaks if you try to navigate from a detail screen (in a deeper level) to another menu-item based master page.... Furthermore, the navigation option you mentions seems to break too in some cases.
And navigation from a deeper level up to the upper level that is under the menu, breaks the menu button :(

EddyVerbruggen · 2017-05-03T14:09:37Z

@cindy-m That's right, but I've never had the need to navigate 2 levels up at once. Would be nice to know how to do that of course.

matt4446 mentioned this issue Jul 25, 2016

Router Outlet not working inside RadSideDrawer #366

Closed

NathanWalker mentioned this issue Aug 2, 2016

new clearHistory routing and RadSideDrawer #371

Closed

NathanWalker closed this as completed Aug 21, 2016

vakrilov mentioned this issue May 16, 2017

Components inside a nested router-outlet are recreated when navigating #802

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

page-router-outlet, router-outlet, RadSideDrawer and ideal route setups #343

page-router-outlet, router-outlet, RadSideDrawer and ideal route setups #343

NathanWalker commented Jul 13, 2016

ntrp commented Jul 13, 2016

NathanWalker commented Jul 13, 2016

NathanWalker commented Jul 13, 2016

vakrilov commented Jul 15, 2016

matt4446 commented Jul 23, 2016 •

edited

lukabers commented Jul 31, 2016

vakrilov commented Aug 1, 2016

VladimirAmiorkov commented Aug 5, 2016

NathanWalker commented Aug 8, 2016

matt4446 commented Aug 15, 2016

shripalsoni04 commented Aug 16, 2016

ghost commented Aug 19, 2016

NathanWalker commented Aug 21, 2016

ghost commented Aug 23, 2016

NathanWalker commented Aug 23, 2016

tomylee001001 commented Aug 23, 2016

VladimirAmiorkov commented Sep 7, 2016

EddyVerbruggen commented Feb 10, 2017 •

edited

murphmar commented Mar 8, 2017

murphmar commented Mar 10, 2017

cindy-m commented May 3, 2017 •

edited

EddyVerbruggen commented May 3, 2017

page-router-outlet, router-outlet, RadSideDrawer and ideal route setups #343

page-router-outlet, router-outlet, RadSideDrawer and ideal route setups #343

Comments

NathanWalker commented Jul 13, 2016

ntrp commented Jul 13, 2016

NathanWalker commented Jul 13, 2016

NathanWalker commented Jul 13, 2016

vakrilov commented Jul 15, 2016

matt4446 commented Jul 23, 2016 • edited

lukabers commented Jul 31, 2016

vakrilov commented Aug 1, 2016

VladimirAmiorkov commented Aug 5, 2016

NathanWalker commented Aug 8, 2016

matt4446 commented Aug 15, 2016

shripalsoni04 commented Aug 16, 2016

ghost commented Aug 19, 2016

NathanWalker commented Aug 21, 2016

ghost commented Aug 23, 2016

NathanWalker commented Aug 23, 2016

tomylee001001 commented Aug 23, 2016

VladimirAmiorkov commented Sep 7, 2016

EddyVerbruggen commented Feb 10, 2017 • edited

murphmar commented Mar 8, 2017

murphmar commented Mar 10, 2017

cindy-m commented May 3, 2017 • edited

EddyVerbruggen commented May 3, 2017

matt4446 commented Jul 23, 2016 •

edited

EddyVerbruggen commented Feb 10, 2017 •

edited

cindy-m commented May 3, 2017 •

edited