Ionic ViewChild (Tabs) not loading main page

Question

Problem is the viewchild is not working as it is supposed to be, BUT when I remove the viewchild the page does work but I still need to type the page name so I need viewchild.

My Ionic version 5.4.16

ERROR

ERROR Error: "Uncaught (in promise): TypeError: this.outlet is undefined select@http://localhost:8100/vendor.js:105637:33 ngOnInit@http://localhost:8100/tabs-tabs-module.js:132:19

EDIT: 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 {}

here is my tabs.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonTabs } from '@ionic/angular'

@Component({
   selector: 'app-tabs',
   templateUrl: './tabs.page.html',
      styleUrls: ['./tabs.page.scss'],
    })
export class TabsPage implements OnInit {

  @ViewChild('tabs', {static: true}) tabs:IonTabs

  constructor() { }

  ngOnInit() {
     this.tabs.select('feed')
  }
}

My HTML (tabs.page.html)

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

    <ion-tab-button tab="feed">
      <ion-icon name="send"></ion-icon>
      <ion-label>Feed</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="uploader">
      <ion-icon name="send"></ion-icon>
      <ion-label>Upload</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile">
      <ion-icon name="send"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>

My tabs-routing-moudule.ts

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

    import { TabsPage } from './tabs.page';

    const routes: Routes = [
      {
        path: '',
        component: TabsPage,
        children: [
          {path: 'feed', loadChildren: '../feed/feed.module#FeedPageModule'},
          {path: 'uploader', loadChildren: '../uploader/uploader.module#UploaderPageModule'},
          {path: 'profile', loadChildren: '../profile/profile.module#ProfilePageModule'}
        ]
      }
    ];

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

If this would help, I'll also include my app.routing.module.ts

    import { NgModule } from '@angular/core';
    import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

    const routes: Routes = [
      { path: '', redirectTo: 'tabs', pathMatch: 'full' },
      { path: 'login', loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)},
      {
        path: 'register',
        loadChildren: () => import('./register/register.module').then( m => m.RegisterPageModule)
      },
      {
        path: 'tabs',
        loadChildren: () => import('./tabs/tabs.module').then( m => m.TabsPageModule)
      },
    ];

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

Answer 1

Add the block of code

ngOnInit() {
     this.tabs.select('feed')
  }

into your tabs.module.ts NOT tabs.page.ts.