CODEWITHSUNDEEP
angularionic-framework
The_Loraxxz
The_Loraxxz

Reputation: 1

Ionic6 Tabs doesn't show content from tab but in DOM it is shown

i got the Problem that i have two ionic tabs and the content of both isnt showing. Furthermore the content can be seen in the DOM, but it is for some weird reason not shown. For test reasons i litereally just wrote

<p>Test</p>

into my homePage but it isnt showing properly, however it is shown in the DOM as seen in here

i also dont have any, like nothing standing in any css files. It is just pure ionic without any stylisation :O.

I hope you can help me :)

app.module.ts

import {NgModule} from '@angular/core';
import {RouteReuseStrategy} from '@angular/router';

import {IonicModule, IonicRouteStrategy} from '@ionic/angular';
import {IonicStorageModule} from "@ionic/storage-angular";
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {HttpClientModule} from "@angular/common/http";
import {BrowserModule} from "@angular/platform-browser";
import {StartPageModule} from "./views/start/start.module";
import {FormsModule} from "@angular/forms";
import {IonicSelectableModule} from "@ionic-selectable/angular";
import {HomePageModule} from "./views/home/home.module";

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    StartPageModule,
    FormsModule,
    HomePageModule,
    IonicStorageModule.forRoot(),
    IonicSelectableModule.forRoot(),
    HttpClientModule,
  ],
  providers: [{provide: RouteReuseStrategy, useClass: IonicRouteStrategy}],
  bootstrap: [AppComponent],
})
export class AppModule {
}

tabs.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { TabsPageRoutingModule } from './tabs-routing.module';    
import { TabsPage } from './tabs.page';    
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TabsPageRoutingModule
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

tabs-routing.module.ts

import { NgModule } from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import { TabsPage } from './tabs.page';    
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children:[
      {
        path: 'hause',
        loadChildren: () => import('../../views/home/home.module').then( m => m.HomePageModule)
      },
      {
        path: 'settings',
        loadChildren: () => import('../../views/settings/settings.module').then( m => m.SettingsPageModule)
      }
    ]
  },
  {
    path:'',
    redirectTo: 'tabs/hause',
    pathMatch:'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule],
  providers:[TabsPageRoutingModule],
})
export class TabsPageRoutingModule {}

tabs.page.html

<ion-tabs>
  <ion-tab-bar slot="bottom">

    <ion-tab-button tab="hause" href="#/tabs/home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-icon name="cog"></ion-icon>
      <ion-label>Einstellungen</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

Upvotes: 0

Views: 124

Answers (1)

D4NT3
D4NT3

Reputation: 141

Try to wrap the template with <ion-content></ion-content> looks like youre template is missing it

Upvotes: 1

Related Questions