I’m getting this Error when using Child Routes and Tabs.
TypeError: Cannot read property 'querySelectorAll' of null at getBackButton
starting from here will open the first child route to another info page
detail.page.html
<ion-item button lines="none" [routerLink]="['details']">More</ion-item>
detail-routing.module.ts
const routes: Routes = [
{
path: '',
component:DetailPage,
children: [
{
path: '',
redirectTo: 'details',
component: DetailInfosPage
}
]
}
];
detail-infos.page.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button color="secondary"></ion-back-button>
</ion-buttons>
<ion-title>Extra Infos</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-tabs>
<ion-tab-bar slot="top">
<ion-tab-button tab="tab1">
<ion-label>Infos</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label>Infos 2</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
detail-infos-routing.module.ts
const routes: Routes = [
{
path: 'details',
component: DetailInfosPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
}
]
},
{
path: 'tab2',
children: [
{
path: '',
loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
}
]
},
{
path: '',
redirectTo: 'details/tab1',
pathMatch: 'full'
}
]
}
];
After clicking
<ion-item button lines="none" [routerLink]="['details']">More</ion-item>
the Error is thrown, but child page with Tabs is loaded but none of the Tabs is active
So what do i’m missing here?