Blank screen with ion-tabs

@sadelbrid wrote:

I’m trying to convert an app from v3 and I’m having a hard time with tabs. My new ionic version is 5.2.4. I’ve set up the tabs, but I’m getting a white screen with no error logs. My tabbed page is called ‘tabbed-event’

Here is my app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Config } from './util/Config';

const routes: Routes = [
  { path: '', redirectTo: Config.STAND_ALONE ? './tabbed-event/tabbed-event.module#TabbedEventPageModule' : 'login', pathMatch: 'full' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Here is my tabbed-event.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { TabbedEventPage } from './tabbed-event.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabbedEventPage,
    children: [
      {
        path: 'elementGroupTab', 
        loadChildren: '../element-groups/element-groups.module#ElementGroupsPageModule'
      },
      {
        path: 'searchTab', 
        loadChildren: '../event-search/event-search.module#EventSearchPageModule'
      },
      {
        path: 'favoritesTab', 
        loadChildren: '../favorites/favorites.module#FavoritesPageModule'
      },
      {
        path: '',
        redirectTo: '/tabs/elementGroupTab',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/elementGroupTab',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [TabbedEventPage]
})
export class TabbedEventPageModule {}

tabbed-event.page.html:

<ion-content has-bouncing="false">
    <ion-tabs (ionTabsWillChange) = 'tabChange($event)' #eventTabs >
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="elementGroupTab">
          <ion-label>Element Groups</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="searchTab">
          <ion-label>Search Skills</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="favoritesTab">
          <ion-label>Favorites</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
</ion-content>

And here’s my first tab’s module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { ElementGroupsPage } from './element-groups.page';

const routes: Routes = [
  {
    path: '',
    component: ElementGroupsPage,
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ElementGroupsPage]
})
export class ElementGroupsPageModule {}

The html for my tabs only contain s. Does anyone see what I could be missing here. Again, I’m just getting a blank screen with no errors.

Posts: 1

Participants: 1

Read full topic