Tabs component rout not match

Hi there I’m trying to implement a tabs component inside of other components I was able to render it with out any issue but at the moment I’m trying to click it I get this error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'galeria/anuncios'
Error: Cannot match any routes. URL Segment: 'galeria/anuncios'

This is my navtabs.component.html

<div class="tabs">
  <ion-tabs slot="bottom">
    <ion-tab-bar slot="bottom">

      <ion-tab-button tab="anuncios">
        <ion-icon name="notifications"></ion-icon>
        <ion-label>Anuncios</ion-label>
        <ion-badge>6</ion-badge>
      </ion-tab-button>
      <ion-tab-button tab="liturgias">
        <ion-icon name="albums"></ion-icon>
        <ion-label>Liturgias</ion-label>
      </ion-tab-button>
  
      <ion-tab-button tab="trabajos">
        <ion-icon name="briefcase"></ion-icon>
        <ion-label>Mis Trabajos</ion-label>
      </ion-tab-button>
  
      <ion-tab-button tab="galeria">
        <ion-icon name="images"></ion-icon>
        <ion-label>Galeria
        </ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</div>

Here is my navtabas.component.ts

import { CommonModule} from '@angular/common';
import { Component, OnInit, NgModule } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';
import { from } from 'rxjs';
import { IonicModule } from '@ionic/angular';
import { RouteReuseStrategy} from '@angular/router';

@Component({
  selector: 'navtabs',
  templateUrl: './navtabs.component.html',
  styleUrls: ['./navtabs.component.scss'],
})


export class NavTabsComponent implements OnInit {

  constructor() { }

  ngOnInit() {}

}

Here is my app-routing.module.ts

import { NgModule, Component } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { componentFactoryName } from '@angular/compiler';
import { AnunciosComponent } from './components/anuncios/anuncios.component';
import { GaleriaComponent } from './components/galeria/galeria.component';
import { LiturgiasComponent } from './components/liturgias/liturgias.component';
import { TrabajosComponent } from './components/trabajos/trabajos.component';
import { PerfilComponent } from './components/perfil/perfil.component';
import { RegistroComponent  } from './components/registro/registro.component';
import { LoginComponent } from './components/login/login.component';
import { PagosComponent } from './components/pagos/pagos.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule)
  },
  {
    path: 'login',
    loadChildren: () => import('./pages/login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'register',
    loadChildren: () => import('./pages/register/register.module').then( m => m.RegisterPageModule)
  },
  {
    path: 'profile',
    loadChildren: () => import('./pages/profile/profile.module').then( m => m.ProfilePageModule)
  },
  {
    path: 'pagos',
    loadChildren: () => import('./pages/pagos/pagos.module').then( m => m.PagosPageModule)
  },

  { path: 'pagos', component: PagosComponent},
  { path: 'login', component: LoginComponent },
  { path: 'registro', component: RegistroComponent},
  { path: 'perfil', component: PerfilComponent},
  { path: 'anuncios', component: AnunciosComponent},
  { path: 'galeria', component: GaleriaComponent},
  { path: 'liturgias', component: LiturgiasComponent},
  { path: 'trabajos', component: TrabajosComponent}
];

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

Can someone put me in the right direction Any help is most appreciated?

Can you isolate this to an actual demo?
from the code example, nothing looks too out of place, but we cannot know for sure without a more complete example

Sorry I did not get what you are asking for

Make a sample app, push it github, and link to it here.

Here is the repo, thanks for the help

Your app isn’t working at all.

Error: Uncaught (in promise): Error: Template parse errors: 'navtabs' is not a known element: 

1. If 'navtabs' is an Angular component, then verify that it is part of this module. 
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

 (" <ion-content> [ERROR ->]<navtabs></navtabs> </ion-content> "): ng:///HomePageModule/HomePage.html@10:2 

Please update the repo.

sorry @mharrington, repo has been updated