NativeScript / Angular nested routing issue with clearing history


I have an issue with routing that drives me nuts. The idea of this test project is that the root app component is using a <page-router-outlet> and then using nested angular routing using <router-outlet> it loads a login parent and child, through which I am navigating to a main page which has two child routes.

If I route from the login.child.ts to the main parent/child with this.router.navigate(['/main']); then everything works fine and I continue alternating between the two children.

However, if I route to the main with clearing history this.router.navigate(['/main'],{ clearHistory: true });, which is what I want because after login I don’t want the user to be able to “go back” to the login, then I am correctly reaching the main parent with the first child, but then am unable to navigate to the other child.

Any ideas as to what I am doing wrong?

This is the routing I am using:

const routes: Routes = [
  { path: "", redirectTo: "login", pathMatch: "full" },
  { path: "login", component: LoginParent,
    children: [
      { path: "", redirectTo: "loginchild", pathMatch: "full" },
      { path: "loginchild", component: LoginChild },
  { path: "main", component: MainParent,
    children: [
      { path: "", redirectTo: "mainchild", pathMatch: "full" },
      { path: "mainchild", component: MainChild },
      { path: "otherchild", component: OtherChild },

I have also asked this question on StackOverflow if anyone prefers to reply there.