Ioni c ViewChild (Tabs) не загружает главную страницу

Question

Проблема в том, что viewchild не работает, как положено, НО , когда я удаляю viewchild, страница работает, но мне все еще нужно ввести имя страницы, поэтому мне нужен viewchild.

My Ioni c версия 5.4.16

ОШИБКА

Ошибка ОШИБКИ : "Uncaught (в обещании): Ошибка типа: this.outlet не определено выберите @ http://localhost: 8100 / поставщик. js: 105637: 33 ngOnInit @ http://localhost: 8100 / tabs -tabs-module. js: 132: 19

РЕДАКТИРОВАТЬ: 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.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 {}

Если это поможет, я также включу свой 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 { }