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’])
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
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
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
The problem in this case is the BackButton of the device, which will return to Login and not to home
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>
thank navigation tabs my problems .solved your answer
it work
I follow every step and reed all the comments but still give this error,
what caused the problem?Thank you all!
please help
I’ve tried every solution , I found it in The internet but still the same error
best regards
Can you share ur tab HTML , TS files module and router file, not able to understand the error with these two file.
**tabs.page.html
<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>
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 {}
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
guys! Anyone here ! please answer me
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.
Thank you Bro champion007 , it works 
, 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
Thank you Bro , it works , 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]
Hi @Abderrahmane1 Yes you can do that by using *ngIf for tabs buttons
tabs.page.html -
<ion-tab-bar slot="bottom">
<ion-tab-button *ngIf="toggle" tab="tab0">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
</ion-tab-bar>
tabs.page.ts
toggle = false;
constructor() {
setTimeout(() => {
this.toggle = true; // You can put your condition as it required.
}, 4000);
}
you can toggle condition in tab.page.ts file.
Hope this will help… 
any solution for the issue?
Did you tried pop out login page from the stack…?
@champion007 Thanks…its work