Nativescript Angular Error: Cannot match any routes using TabStrip

in my Nativescript+Angular app I'm using a BottomNavigation with TabStrip.

app.routing.ts:

const routes: Routes = [
 { path: "", redirectTo: "/login", pathMatch: "full" },
 { path: "login", component: LoginComponent },
 { path: "tabsWrapper", component: TabsWrapperComponent, loadChildren: "./tabsWrapper/tabsWrapper.module#TabsWrapperModule", canActivate: [AuthGuard] }
];

After the login, I navigate to tabsWrapper:

this.routerExtensions.navigate(["tabsWrapper"], { clearHistory: true }).catch(err => console.log(err));

This is the routing of taspWrapper, tabsWrapper-routing.module.ts:

const routes: Routes = [
{
    path: "",
    redirectTo: "home",
    pathMatch: "full"
},
{ path: "home", loadChildren: "../home/home.module#HomeModule", outlet: "homeTab" },
{ path: "subscriptions", loadChildren: "../subscriptions/subscriptions.module#SubscriptionsModule", outlet: "subscriptionsTab" }
];

There are two tabs, the "Home" tab and the "Subscriptions" tab; there are both lazy-loaded modules.

tabsWrapper.component.html:

<BottomNavigation selectedIndex="0" (selectedIndexChanged)="onSelectedIndexChanged($event)">
    <TabStrip (itemTap)="onItemTapped($event)">
        <TabStripItem title="home">
            <Label class="tab-title" text="Home"></Label>
        </apabStripItem>
        <TabStripItem title="subscriptions">
            <Label class="tab-title" text="Subscriptions"></Label>
        </TabStripItem>
    </TabStrip>

    <TabContentItem>
        <GridLayout>
            <page-router-outlet name="homeTab"></page-router-outlet>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <page-router-outlet name="subscriptionsTab"></page-router-outlet>
        </GridLayout>
    </TabContentItem>
</BottomNavigation>

This is the routing of the home module
home-routing.module.ts:

const routes: Routes = [
{ path: "", redirectTo: "home" },
{ path: "itemDetails/:itemId", component: ItemDetailsComponent },
{ path: "home", component: HomeComponent }
];  

In the home component there are some items retrieved by services. When I tap on them, it redirects correctly to the item details page. For UI choise I can't put a back button on header, so what I'm trying to do is that if I am in the item details page, if I tap on Home Tab it has to go back home (and I can't use just a navigation.back() because then I'll have to add some routes which from the detail page brings you to a second detail page).

As you can notice I added (itemTap)="onItemTapped($event)" on tabsWrapper component, and it has to handle the behaviour:

  onItemTapped(newIndexObj) {
   const isInSameTab = newIndexObj.index === this.selectedTab ? true : false;
   if (isInSameTab) {
  if (this.selectedTab === 0) {
    this.routerExtensions.navigate(['../home'], {
      clearHistory: true
    });

    /*
    this.routerExtensions.navigate(['/tabsWrapper/{homeTab:home}/home'], {
      clearHistory: true
    }); 

    this.routerExtensions.navigate(['/tabsWrapper/'], {
      clearHistory: true
    }); 
    this.router.navigate(["../"], {  });
    */

    }

  }
 }

As you can see I tried a lot of ways but none of them works; if I use "home" it gives me the error "Error: Cannot match any routes. URL Segment: 'home'", same if I use "tabsWrapper".

So, I am in the detail page inside the "home" tab and by pressing on the "Home" tab I want to go back to the list of items from the detail page (the route "/home" of the home.module.ts module), and this is the structure of app:

• login
• tabsWrapper
  • home
    • home <-------- TO HERE
    • itemDetails/:itemId <-------- FROM HERE
    • subitemDetails/:itemId/:secondItemId (this I'll have to add later)
  • subscriptions
    • .....
    • ..... (there will be a similar behaviour)

If it can helps, I put a breakpoint in onItemTapped() function and I debug this.router.url: "/tabsWrapper/(homeTab:home/itemDetails/6f92b723-7938-4d26-9262-a3f92846b3c8//subscriptionsTab:subscriptions/subscriptions)"

I found the solution:

this.router.navigate([{ outlets: { "homeTab": ["home"] } }], { relativeTo: this.route });

I had to explicit the outlet

Based on the scenario, you can use the relativeTo property in angular router.

Currently the activatedRoute is tabsWrapper/home/itemDetails:itemId.
From this route, angular does not know about the home route which is the thrown error.

Try using,

In component.ts file:

export class Dummy {
    constructor(private router: Router, private route: ActivatedRoute) {}

    goTo() {
        this.router.navigate(['../home], { relativeTo: this.route })
    }
}

Hope this works.