I cannot navigate correctly using ion-tabs (IONIC 4)

Question

I have the following code structure:

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.pagets.

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 {}

This is what happens:

• If I access http://localhost:8100/ it redirects to http://localhost:8100/home <- Right.

• If I’m in http://localhost:8100/home and click on the tab balance, the application tries to access http://localhost:8100/home/balance <- Wrong. Error on console: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home/balance'.

• The same if I’m in http://localhost:8100/balance (manually browsing) and click on the tab home. Console error: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'balance/home'.

What should happen:

By clicking on the tab, navigate to the current address. Be in http://localhost:8100/balance and click on home should sail to http://localhost:8100/home and so on.

Thanks for your help, I don’t know where else to look.

Answer 1

In the navigation you are including the "/" before "balance" and "home"?

I believe this error because if you do not put the bar it will try to access the route "balance/home" what really does not exist...