Nativescript-angular: page-router-outlet, router-outlet, RadSideDrawer and ideal route setups

[NathanWalker]

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]

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]

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

[NathanWalker]

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]

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]

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]

+1 Same problem here with Router-Outlet

[vakrilov]

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]

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]

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

[matt4446]

'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]

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]

please can you share code with me

[NathanWalker]

I got this working, thanks again for the fix.

[ghost]

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

[NathanWalker]

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

[tomylee001001]

@NathanWalker thanks for the sahre

[VladimirAmiorkov]

@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]

@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]

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]

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]

@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]

@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.