Ionic 4 tabs navigation post login - Solution

#21

I suggest to start from:
in tabs.router.module.ts remove ‘tabs’ from:
path: ‘tabs’, -->make it ‘’
component: TabsPage,
children: […
add it to path:
,
{
path: ‘tabs’,<-- here
redirectTo: ‘/tabs/setting’,
pathMatch: ‘full’
}

at app-routing.module.ts:
replace ‘‘app’’ with ‘‘tabs’’

and navigate with r.navigate([‘tabs’])

#22

Hello,

I think I read this topic from a to z. when I click on the button I always have an error msg. if someone has a solution… thx

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'app', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
  { path: 'profile-edit', loadChildren: './profile-edit/profile-edit.module#ProfileEditPageModule' },
  { path: 'sign-up1', loadChildren: './sign-up1/sign-up1.module#SignUp1PageModule' },
  { path: 'sign-up2', loadChildren: './sign-up2/sign-up2.module#SignUp2PageModule' },
  { path: 'tab1-result', loadChildren: './tab1-result/tab1-result.module#Tab1ResultPageModule' },
  { path: 'disconnect', loadChildren: './disconnect/disconnect.module#DisconnectPageModule' },
  { path: 'delete-account', loadChildren: './delete-account/delete-account.module#DeleteAccountPageModule' },
  { path: 'faq', loadChildren: './faq/faq.module#FaqPageModule' }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

login.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button (click)="navTabs()" expand="block">Navigate to tabs</ion-button>
</ion-content>

login.page.ts

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  async navTabs() {
    //you can use either of below
    this.route.navigateByUrl('/app/tabs/(home:home)');
    //this.navCtrl.navigateRoot('/app/tabs/(home:home)');
  }
}

when I click on the button I always have an error msg.

RROR Error: Uncaught (in promise): TypeError: Cannot read property 'navigateByUrl' of undefined
TypeError: Cannot read property 'navigateByUrl' of undefined
    at LoginPage.<anonymous> (login.page.ts:17)
    at step (tslib.es6.js:97)
    at Object.next (tslib.es6.js:78)
    at tslib.es6.js:71
    at new ZoneAwarePromise (zone.js:910)
    at Module.__awaiter (tslib.es6.js:67)
    at LoginPage.push../src/app/login/login.page.ts.LoginPage.navTabs (login.page.ts:15)
    at Object.eval [as handleEvent] (LoginPage.html:8)
    at handleEvent (core.js:23097)
    at callWithDebugContext (core.js:24167)
    at resolvePromise (zone.js:831)
    at new ZoneAwarePromise (zone.js:913)
    at Module.__awaiter (tslib.es6.js:67)
    at LoginPage.push../src/app/login/login.page.ts.LoginPage.navTabs (login.page.ts:15)
    at Object.eval [as handleEvent] (LoginPage.html:8)
    at handleEvent (core.js:23097)
    at callWithDebugContext (core.js:24167)
    at Object.debugHandleEvent [as handleEvent] (core.js:23894)
    at dispatchEvent (core.js:20546)
    at core.js:20993
#23

Hi,
I think the error is not related to this subject. try to add the “router” as an input to the constructor (private router: Router)… and import { Router} from ‘@angular/router’; if you didn’t

I think some basic learning is needed here .

regards

#24

Hello,
I am also getting the same error: -

My app-routing.module.ts is
const routes: Routes = [ { path: '', loadChildren: './login/login.module#LoginPageModule' }, { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' } ];

My tabs.html page is : -

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1" >
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
      <ion-router-outlet></ion-router-outlet>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
      <ion-router-outlet></ion-router-outlet>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
      <ion-router-outlet></ion-router-outlet>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>


<!-- <ion-tabs>
    <ion-tab label="Home" icon="ios-notifications" href="/tabs/(tab1:tab1)">
      <ion-router-outlet name="tab1"></ion-router-outlet>
    </ion-tab>
    <ion-tab label="About" icon="information-circle" href="/tabs/(tab2:tab2)">
      <ion-router-outlet name="tab2"></ion-router-outlet>
    </ion-tab>
    <ion-tab label="Contact" icon="contacts" href="/tabs/(tab3:tab3)">
      <ion-router-outlet name="tab3"></ion-router-outlet>
    </ion-tab>
</ion-tabs> -->

Could you please help me out

#25

The problem in this case is the BackButton of the device, which will return to Login and not to home

#26

I got it fixed…


see the above comment and U can use the below code in the navTab function.
async navTabs() {
this.router.navigateByUrl("/app/tabs/tab1");
}
or else u can try the following option in html part
<ion-button routerLink="/app/tabs/tab1" expand=“block”>Navigate to tabs</ion-button>

#27

thank navigation tabs my problems .solved your answer
it work

#28

I follow every step and reed all the comments but still give this error,
what caused the problem?Thank you all!


image
image

#29

please help
I’ve tried every solution , I found it in The internet but still the same error
best regards

#30

Can you share ur tab HTML , TS files module and router file, not able to understand the error with these two file.

#31

**tabs.page.html

Traveaux
<ion-tab-button tab="personnels">
  <ion-icon name="contacts"></ion-icon>
  <ion-label>personnels</ion-label>
</ion-tab-button>

<ion-tab-button tab="messages">
  <ion-icon name="chatboxes"></ion-icon>
  <ion-label>Messages</ion-label>
</ion-tab-button>

<ion-tab-button tab="plus">
  <ion-icon name="settings"></ion-icon>
  <ion-label>Plus</ion-label>
</ion-tab-button>
_____________________________________________________- *******tabs.router.module.ts*********** import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { TabsPage } from './tabs.page';

const routes: Routes = [
{
path: ‘tabs’,
component: TabsPage,
children: [
{
path: ‘traveaux’,
children: [
{
path: ‘’,
loadChildren: ‘…/traveaux/tab1.module#Tab1PageModule’
}
]
},
{
path: ‘personnels’,
children: [
{
path: ‘’,
loadChildren: ‘…/personnels/tab2.module#Tab2PageModule’
}
]
},
{
path: ‘messages’,
children: [
{
path: ‘’,
loadChildren: ‘…/messages/tab3.module#Tab3PageModule’
}
]
},
{
path: ‘plus’,
children: [
{
path: ‘’,
loadChildren: ‘…/plus/tab4.module#Tab4PageModule’
}
]
},
{
path: ‘’,
redirectTo: ‘/tabs/traveaux’,
pathMatch: ‘full’
}
]
},
{
path: ‘’,
redirectTo: ‘/tabs/traveaux’,
pathMatch: ‘full’
}
];

@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}


******tabs.page.ts
import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-tabs’,
templateUrl: ‘tabs.page.html’,
styleUrls: [‘tabs.page.scss’]
})
export class TabsPage {}

#32

In tabs.page.html there’s also

<ion-tab-button tab="traveaux">
  <ion-icon name="apps"></ion-icon>
  <ion-label>Traveaux</ion-label>
</ion-tab-button>

please some help
what caused the problem? thank you

#34

guys! Anyone here ! please answer me

#35

There is change of routing changes since this parent post was published.
You can change the navigation routing by below code snippet and check, you can also see new tab example generated default for ionic 4 project using .

this.route.navigateByUrl("/app/tabs/traveaux");

and traveaux must be inside traveaux folder not tab1.

#36

Thank you Bro champion007 , it works :+1: , bro I have a question for you , do you have an idea about roles based an authentication by firebase , because Bro I want admin can see all tabs but normal user can see just one tab ? thank you bro

#37

Thank you Bro , it works :+1: , bro I have a question for you , do you have an idea about roles based an authentication by firebase , because Bro I want admin can see all tabs but normal user can see just one tab ? thank you bro
[/quote]