I can't navigate properly using ion-tabs (IONIC 4)

I have the following code structure:

App-routing.modulate.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.modulate.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 {}

Here's what happens:

• If I access http://localhost:8100/ it redirects to http://localhost:8100/home

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

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

What should happen:

When you click the tab, navigate to the current address. Being in http://localhost:8100/balance and clicking home should navigate to http://localhost:8100/home and so on.

Thanks for the help, I don't know where to look anymore.