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.

please can you share code with me

[NathanWalker]

I got this working, thanks again for the fix.