0

I am using Ionic 4 and Angular 8 I have below tabs on the bottom of my app and want to navigate from forum and messages to different components associated with tabs on the click of tabs. But the issue is Page do not render on the click of tabs but if I refresh my page then navigation works fine. I don't know what I am missing here.

Tabs HTML

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button selected tab="food" (pointerup)="changeItems('food')">
      <ion-icon name="pizza"></ion-icon>
      <ion-label>Food</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="non-food" (pointerup)="changeItems('non-food')">
      <ion-icon name="basket"></ion-icon>
      <ion-label>Non-Food</ion-label>
    </ion-tab-button>
    <ion-tab-button class="add-circle" tab="createListing" (pointerup)="routeTo('createListing')">
      <ion-icon name="add-circle"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="forum" (pointerup)="routeTo('forum')">
      <ion-icon name="folder"></ion-icon>
      <ion-label>Forum</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="messages" (pointerup)="routeTo('messages')">
      <ion-icon name="chatboxes"></ion-icon>
      <ion-label>Messages</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

routesTo('messages') and routesTo('forum') in TS file.

routeTo(route: string){
    this.navCtrl.navigateForward(`sharing/${route}`);
  }

I have a login page inside LandingPageModule from where I directly route to 'sharing/home' which is a child route of 'sharing'

For more information I have base route module as:

const routes: Routes = [
  { path: '', redirectTo: 'landing', pathMatch: 'full' },
  { path: 'landing', loadChildren: () => import('./landing/landing.module').then(mod=> mod.LandingPageModule) },
  { path: 'sharing', loadChildren: () => import('./sharing/sharing.module').then(mod=> mod.SharingModule)  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Sharing module's routes are as:

RouterModule.forChild([
      {
        path: '',
        component: ShareLayoutComponent,
        children:[{
          path: 'home',
          component: HomeComponent
        },
        {
          path: 'forum',
          component: ForumComponent
        },
        {
          path: 'messages',
          component: MessageComponent
        }]
}])
Abhishek Chokra
  • 1,381
  • 2
  • 9
  • 17

2 Answers2

0

Wouldn't you be trying to access components that are loaded via lazy-load? Because when you refresh the page, they load well.

Try change from:

<ion-tab-button tab="messages" (pointerup)="routeTo('messages')">
   <ion-icon name="chatboxes"></ion-icon>
   <ion-label>Messages</ion-label>
</ion-tab-button>

To:

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

And check the routes from current module that contain these components

Example:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'messages',
        children: [
          {
            path: '',
            loadChildren: '../messages/messages.module#MessagesModule'
          }
        ]
      }
    ]
  }
];
  • NOTE: If migrating from Ionic 3, be aware that some familiar Ionic navigation elements have been deprecated in version 4. While they work, it is NOT recommended to use NavController or ion-nav.

Using angular router instead:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({ ... })
export class HomePage {
  constructor(private router: Router) {}

  routeTo(route: string){
    this.router.navigateByUrl(`sharing/${route}`);
    this.navCtrl.navigateForward(`sharing/${route}`);
  }
}

Best regards.

1antares1
  • 1,146
  • 2
  • 11
  • 19
  • NavController in Ionic 3 and Ionic 4 are different as in Ionic 4 it uses Angular's own routing underneath. `this.navCtrl.push('sharing')` and `this.router.navigateByUrl('sharing')` have a lot of difference. Ionic 4 navController is just as same as Angular with implicitly giving forward and backward animations – Abhishek Chokra Sep 25 '19 at 06:45
  • But I understand that you will start using Angular Router because it is recommended in its official documentation. Right? ;) This means, instead of your pushing/popping around inside your app, now you can to define paths with native feature :). – 1antares1 Sep 25 '19 at 17:08
  • I've added routes as well. Please have a look – Abhishek Chokra Sep 25 '19 at 18:02
  • @AbhishekChokra Why do you refer to root "sharing" if your parent path is empty ""? Try: "this.navCtrl.navigateForward(route);" – 1antares1 Sep 25 '19 at 18:24
  • When I route from login to `sharing/home` it does perfectly fine. And if I try `this.navClt.navigateForward(route)` from tabs that routes to `localhost:8080/messages` which should not as a valid url is 'localhost:8080/sharing/messages' – Abhishek Chokra Sep 25 '19 at 18:34
  • @AbhishekChokra If you mention that "home" works correctly, maybe then the component ID is called different or the selector? If you are in "home", could you simulate a call to "messages" to see what happens? – 1antares1 Sep 26 '19 at 14:30
  • Hey, nope that was not the case it was working fine on refreshing the page. – Abhishek Chokra Sep 27 '19 at 14:52
0

I've found the solution. This answer is for those who are facing same. Just add 'ion-content' in each markup page or segregated HTML. e.g., form component ABC and component XYZ keep all markup inside ion-content.

<ion-content
  <!--Your HTML goes here-->
</ion-content>

Additional details about tabs in Ionic 4:

Ionic 4 did some changes to the tabs which changes the way the worked from years. Now you can use the tabs just as buttons (They won't route your application forcefully just because they are tabs) I've remove tab attribute from the tabs(Which is a feature officially provided by Ionic). How it will help? You will get to know when you will route lazy loaded routing or a scenario where food and non-food are not separate pages but they are just filtering some content on home page which have all the logic.

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button selected (pointerup)="changeItems('food')">
      <ion-icon name="pizza"></ion-icon>
      <ion-label>Food</ion-label>
    </ion-tab-button>
    <ion-tab-button (pointerup)="changeItems('non-food')">
      <ion-icon name="basket"></ion-icon>
      <ion-label>Non-Food</ion-label>
    </ion-tab-button>
    <ion-tab-button class="add-circle" (pointerup)="routeTo('createListing')">
      <ion-icon name="add-circle"></ion-icon>
    </ion-tab-button>
    <ion-tab-button (pointerup)="routeTo('forum')">
      <ion-icon name="folder"></ion-icon>
      <ion-label>Forum</ion-label>
    </ion-tab-button>
    <ion-tab-button (pointerup)="routeTo('messages')">
      <ion-icon name="chatboxes"></ion-icon>
      <ion-label>Messages</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

Now above are just buttons which look like tabs. By using them you don't have to worry about same name routes. Just route to different components just by clicking your tabs.

Abhishek Chokra
  • 1,381
  • 2
  • 9
  • 17