Вкладки ion не отображаются

Я попытался разместить свои ионные вкладки внизу, но они не отображаются. Кто-нибудь может мне объяснить, почему?

Домашняя страница:

<ion-content padding>

<div id = "HomePage">
<ion-item id = "profilePictureBox">
<img src = "{{user?.profilePicture}}" id = "profilePicture">
<h2 id = "username">{{user?.name}}</h2>
</ion-item>

<notifications></notifications>

<upcoming-events></upcoming-events>

</div>
</ion-content>

<nav-footer></nav-footer>

И мои ионные вкладки находятся в нижнем колонтитуле компонента:

<ion-tabs tabsPlacement = "bottom" [selectedIndex] = "0">
<ion-tab tabIcon = "home-outline" tabTitle = "Home" [root] = "HomePage">
</ion-tab>
<ion-tab tabIcon = "search" tabTitle = "test" [root] = "SearchEventsPage">
</ion-tab>
<ion-tab>
</ion-tab>
</ion-tabs>

И это CSS по умолчанию, я ничего не менял

Нет вкладок внизу, но я могу найти компонент вкладки в dom