router-outlets and shared components

Question

I am using angular-nativescript and want to include some components on every site. I was able to achieve this using code below in my app.component.

<page-router-outlet></page-router-outlet><my-component></my-component>

This doesn't work (as mentioned in documentation). Using router-outlet in the same way works, but I can't navigate back. How do I solve this? I played around with router-outlet in a component and child-routes, but I am getting mixed results.

When I just put the component on every page manually, they are created as new instances and a lot of code gets executed wastefully (I pull data from server and populate arrays in my-component)

Answer 1

According to a discussion on NativeScript's github this behaves as it should.

page-router-outlet navigates to a new page (like a native app should do) and my-component is not present there. router-outlet does not navigate anywhere, just swaps it's content and back button tries to navigate to a previous page. Since there is none, the application closes.

The solution is to add the component manually on each page.