click on nb-route-tabset redirect to an other page

Question

I'm using nebular. I try to display three pages. Here is my template :

<nb-card>
   <nb-card-body>
       <nb-route-tabset *ngIf="tabs" [tabs]="tabs" fullWidth></nb-route-tabset>
   </nb-card-body>
</nb-card>

Here are my tabs for my component :

tabs: NbRouteTab[] = [
{
  title: "Parameters",
  route: "./parameters",
},
{
  title: "Rules",
  route: "./rules",
},
{
  title: "Converters",
  route: "./converters",
},
];

And finally, here is my routing module :

const routes: Routes = [
{
    path: "",
    component: ConversionOverviewComponent,
},
{
    path: "parameters",
    component: ConversionConfigurationEditComponent,
},
{
    path: "rules",
    component: ConversionRulesListComponent,
},
{
    path: "converters",
    component: ConvertersListComponent,
},
];

My tabset is in ConversionOverviewComponent. It display correctly the three tab names but with no content. If I click on one header, I'm redirected to the an other page (ex: ConversionRulesListComponent) How to solve this ?

Answer 1

I finally found the root ! In my routing module, I had to declare all routes as children of the one containing the tab. Like this :

const routes: Routes = [
  {
    path: "",
    component: ConversionOverviewComponent,
    children: [
      {
        path: "",
        redirectTo: "parameters",
        pathMatch: "full",
      },
      {
        path: "parameters",
        component: ConversionConfigurationEditComponent,
      },
      {
        path: "rules",
        component: ConversionRulesListComponent,
      },
      {
        path: "converters",
        component: ConvertersListComponent,
      },
    ],
  },
];