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?