When using nested router-outlet, the back button exits the App

I’m trying to add child-routes to my Angular Native App, but when I click my android back-button the App just exits.

I’ve tried to write an example to show what the problem it here: https://github.com/m-abs/angular2-seed-advanced/tree/child-router It’s based on Nathan Walker’s angular2-seed-advanced as that’s what we use in our project.

What I’ve done:

• I created three Child<N>Components in https://github.com/m-abs/angular2-seed-advanced/tree/child-router/src/client/app/components/home/children
• I added the child-routes here: https://github.com/m-abs/angular2-seed-advanced/blob/child-router/src/client/app/components/home/home.routes.ts#L13-L18
• Finally I added the router-outlet here: https://github.com/m-abs/angular2-seed-advanced/blob/child-router/src/client/app/components/home/home.component.tns.html#L23

What happens:

• I tap on the Button nsRouterLinks and the components are loaded. Even the ActionBar works per Child<N>Component, which were a bit of a surprise.
• Click on the devices back-button, exits my App right away.

What I’d expect:

• I tap on the Button nsRouterLinks and the components are loaded
• I click back and the go back to the previous component in history

More data: I’ve tried tracing it to try and make heads or tail on it:

JS: ns-router: NSLocationStrategy.path(): /
JS: Router Event: NavigationStart(id: 1, url: '/')
JS: Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
JS: Router Event: RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/home/child1', state: Route(url:'', path:'') { Route(url:'home', path:'home') { Route(url:'child1', path:'child1') }  } )
JS: ns-router: NSLocationStrategy.path(): /
JS: ns-router: NSLocationStrategy.replaceState pushing new state: null, title: , url: /home/child1, queryParams: null
JS: ns-router: PageRouterOutlet.activate() inital page - just load component
JS: Router Event: NavigationEnd(id: 1, url: '/', urlAfterRedirects: '/home/child1')
JS: NativeLifecycle: fragment0[0]<Page(1)>.onCreateAnimator(0, enter, undefined): null
JS: ns-router: nsRouterLink.tapped: /home/child2 usePageRoute: true clearHistory: undefined transition: true
JS: ns-router: NSLocationStrategy._setNavigationOptions({"clearHistory":false,"animated":true})
JS: Router Event: NavigationStart(id: 2, url: '/home/child2')
JS: Router Event: RoutesRecognized(id: 2, url: '/home/child2', urlAfterRedirects: '/home/child2', state: Route(url:'', path:'') { Route(url:'home', path:'home') { Route(url:'child2', path:'child2') }  } )
JS: ns-router: NSLocationStrategy.path(): /home/child1
JS: ns-router: NSLocationStrategy.pushState state: null, title: , url: /home/child2, queryParams: null
JS: Router Event: NavigationEnd(id: 2, url: '/home/child2', urlAfterRedirects: '/home/child2')
JS: NativeLifecycle: NativeScriptActivity.onBackPressed;
JS: TNS Application - Suspended
JS: NativeLifecycle: NativeScriptActivity.onStop();
JS: NativeLifecycle: fragment0[0]<Page(1)>.onDestroyView()
JS: NativeLifecycle: HIDDEN fragment0[0]<Page(1)>; destroyed: true
JS: NativeLifecycle: fragment0[0]<Page(1)>.onDestroy()
JS: TNS Application - EXIT
JS: NativeLifecycle: NativeScriptActivity.onDestroy();

As you can see NSLocationStrategy.pushState(/home/child2) is called for the child-route, but after onBackPressed the App just exits.

[sittingbool]

The whole Navigation structure is a mess in my opinion. Its the wrong way around and i always struggle a lot if i want to combine navigation controls like i am used to with ios. In iOS and many Android Apps nowadays you have a tab view and navigate the content of each tab. otherwise tabs make no sense. On a website you would navigate inside the tab too by pressing back. in nativescript the tabview is constructed to be inside the “UINavigationController”. A back button should not change anything on the tabview but navigate its content backwards. To have an page-router-outlet that cant be wrapped into someting is a brake of that structure. Usually i want a tabview outside, sometimes also a side-drawer. and definitively i dont want it an each page but globally.

[sittingbool]

I certainly did. I used the template project where this was set already.