How do I implement the <router-outlet> directive in Nativescript to show child routes? - angular2-routing

Question

I have been working with Nativescript with Angular 2 and Typescript and understand there are two options for the router outlet. The original angular <router-outlet> directive which can be used to show children routes of a component, and the <page-router-outlet> which is specific to nativescript routing. I have been using the latter and attempting to use the <router-outlet> directive but find that it acts the same. I want for example this scenario.
parent.component.html
<StackLayout>
<Button [nsRouterLink]="['/accounts/edit-account']"><Button>
<Button [nsRouterLink]="['/accounts/new-account']"><Button>
</StackLayout>
<router-outlet></router-outlet>
This has two buttons with nativescript nsRouterlink directive. I want the buttons to remain while the router-outlet updates with the child information.
here are the routes.
module.routing.ts
const Routes: Routes = [
{ path: "accounts", children: [
{path: "", component: ParentComponent },
{ path: "new-account", component: ChildOneComponent},
{ path: "edit-account", component: ChildTwoomponent},
]
},
];
The problem is when I attempt this it replaces the entire screen without leaving the buttons in place as would do the <page-router-outlet> directive.
I've even followed this documentation by Nativescript and the example does not act as the documentation declares.
Can anyone steer me in the right direction?

Answer 1

Following the Nativescript Documentation again works ok. The solution in general is in the routing to change from
const Routes: Routes = [
{ path: "accounts", children: [
{path: "", component: ParentComponent },
{ path: "new-account", component: ChildOneComponent},
{ path: "edit-account", component: ChildTwoomponent},
]
},
];
to
const Routes: Routes = [
{ path: "accounts", component: ParentComponent, children: [
{path: "", redirectTo: "/accounts/new-account", pathMatch: 'full' },
{ path: "new-account", component: ChildOneComponent},
{ path: "edit-account", component: ChildTwoomponent},
]
},
];
Finding this I have a new issue that I will post in a different question and link to this answer later.