Tabs Routing within app.component.html

I had an existing Angular 12 application that I added Ionic to. This application was a PWA and we want to leverage Ionic to compile it into Android and IOS and will use some native functionality via Capacitor.

I am currently attempting to add the Tabs component and only want the tabs component showing if we are on a mobile platform.

My app.component.html looks like this

<router-outlet></router-outlet>

<div class="loading" *ngIf="loading">Loading&#8230;</div>

<ion-tabs *ngIf="mobile">
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="schedule">
        <ion-icon name="calendar"></ion-icon>
        <ion-label>Schedule</ion-label>
      </ion-tab-button>
  
      <ion-tab-button tab="account" *ngIf="!authenticated">
        <ion-icon name="person-circle"></ion-icon>
        <ion-label>Account</ion-label>
      </ion-tab-button>
    
      <ion-tab-button tab="chat" *ngIf="displayChat && authenticated">
        <ion-icon name="chatbox"></ion-icon>
        <ion-label>Chat</ion-label>
      </ion-tab-button>

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

I tried to read the documentation on tying this into the Angular Routing but all examples i see are from an angular app created via Ionic and not an Angular app with Ionic added. Hence there is a Tab-Nav page which houses the TabHTML. Id ultimately want to have this running from the app.component so I updated the app-routing.module.ts to the following

import { LoginComponent } from './user/components/login/login.component';

const routes: Routes = [{
  path: 'account',
  component: LoginComponent,
  children: [
    {
      path: '',
      loadChildren: () => import('./user/user.module').then(m => m.UserModule)
    }
  ]
}];

The issue I am having is when I click on the Account tab the LoginComponent isnt registered. The console shows “tab with id: “undefined” does not exist”

Im not understanding why its undefined when I have the Tab attribute of the ion-tab-button defined

1 post - 1 participant

Read full topic