Tenho a seguinte estrutura de código:
app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: './pages/main-tabs/main-tabs.module#MainTabsPageModule', },
{ path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
{ path: 'register', loadChildren: './pages/register/register.module#RegisterPageModule' }
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
main-tabs.page.html
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home">
<ion-icon name="create"></ion-icon>
<ion-label>Anote!</ion-label>
</ion-tab-button>
<ion-tab-button tab="balance">
<ion-icon name="apps"></ion-icon>
<ion-label>Balancete</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
main-tabs.page.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-main-tabs',
templateUrl: 'main-tabs.page.html',
styleUrls: ['main-tabs.page.scss']
})
export class MainTabsPage {}
main-tabs.router.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainTabsPage } from './main-tabs.page';
import { AuthGuardService } from 'src/app/services/auth-guard.service';
const routes: Routes = [
{
path: '',
component: MainTabsPage,
children: [
{
path: 'home',
canActivate: [AuthGuardService],
children: [
{
path: '',
loadChildren: '../home/home.module#HomePageModule'
}
]
},
{
path: 'balance',
canActivate: [AuthGuardService],
children: [
{
path: '',
loadChildren: '../balance-sheet/balance-sheet.module#BalanceSheetPageModule'
}
]
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
Eis o que acontece:
- Se eu acesso
http://localhost:8100/
ele redireciona parahttp://localhost:8100/home
<- Certo. Se eu estou em
http://localhost:8100/home
e clico na ababalance
, a aplicação tenta acessarhttp://localhost:8100/home/balance
<- Errado. Erro no console:ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home/balance'
.O mesmo se estou em
http://localhost:8100/balance
(navegando manualmente) e clico na abahome
. Erro no console:ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'balance/home'
.
O que deveria acontecer:
Ao clicar na aba, navegar para o endereço corrento. Estar em http://localhost:8100/balance
e clicar em home
deveria navegar para http://localhost:8100/home
e assim por diante.
Obrigado pela ajuda, já não sei mais onde procurar.