0

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 para http://localhost:8100/home <- Certo.
  • Se eu estou em http://localhost:8100/home e clico na aba balance, a aplicação tenta acessar http://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 aba home. 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.

1 Resposta 1

0

Na navegação você está incluindo o "/" antes de "balance" e "home"?

Acredito ser esse erro pois se não colocar a barra ele vai tentar acessar a rota "balance/home" o que realmente não existe...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .