Tabs component rout not match

ionic Angular
#1

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?

#2

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

#3

Sorry I did not get what you are asking for

#4

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

#5

Here is the repo, thanks for the help

#6

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.

#7

sorry @mharrington, repo has been updated