Tabs Routing within app.component

Ionic Framework Ionic Angular
1

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

2

While you wait for better answers, I’d like to take a stab at convincing you to change something simply based on UI research, with an outside chance that it’ll also help with your proximate issue.

Users get accustomed to the spatial layout of elements, and it’s disorienting when they move around.

Therefore, I would suggest never using ngIf to wink tabs in and out of existence. Always have the same tabs in the DOM in the same order. If some of them don’t make sense in the current context, then disable them instead of vaporizing them.