question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Upgrade to latest ionic4 version, tabs navigation not work

See original GitHub issue

Bug Report

Ionic version: [x] 4.x Current behavior:

After I upgrade ionic4 latest version, there is a routing issuse: when I have more than one page using tabs, and navigate from one tab to another, then clicking on the tab buttons changes the url but does not change the displayed page, always the default page is displayed . When I click browser refresh button with the changed url, the correct page will be displayed, but clicking tab still as the previous.

Expected behavior:

Should display the page;

Steps to reproduce:

Related code:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'goods',
        children: [{
          path: '',
          loadChildren: '@pages/goods/goods.module#GoodsPageModule'
        }]
      },
      {
        path: 'order',
        children: [{
          path: '',
          loadChildren: '@pages/order/order.module#OrderPageModule'
        }]
      },
      {
        path: 'mine',
        children: [{
          path: '',
          loadChildren: '@pages/mine/mine.module#MinePageModule'
        }]
      },
      {
        path: '',
        redirectTo: '/tabs/mine',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/goods',
    pathMatch: 'full'
  }
];

Ionic info:

Ionic:
   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.1
   @angular-devkit/build-angular : 0.13.5
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.5
   @ionic/angular-toolkit        : 1.4.0
Cordova:
   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.3, (and 10 other plugins)
System:
   Android SDK Tools : 26.1.1 (/Users/cundongzhang/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v8.12.0 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
zcd0000commented, Apr 1, 2019

I found this caused by my global.scss file content, I lost two lines: core.css and display.css in this file. Previous version maybe don’t need these files. After I add them, Tab navigation then works correctly.

@import "~@ionic/angular/css/core.css";
@import "~@ionic/angular/css/display.css";
0reactions
ionitron-bot[bot]commented, May 1, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Upgrade to latest ionic4 version, tabs navigation not work
Current behavior: After I upgrade ionic4 latest version, there is a routing issuse: when I have more than one page using tabs, and...
Read more >
Ion-Tabs: Tab-Based Component for App Top-Level Navigation
Tabs are top-level components to implement tab-based navigation. Ion-tabs have no styling & work as router outlets for navigation that behaves like native ......
Read more >
Ionic 4 component is not rendering on navigation
But the issue is Page do not render on the click of tabs but if I refresh my page then navigation works fine....
Read more >
How to Combine Ionic 4 Tabs and Side Menu Navigation
In this tutorial we combine the tabs and side menu pattern into one Ionic 4 app! Learn to build mobile apps with Ionic...
Read more >
Navigating between tabs (Ionic Angular) | Alan Docs
Step 3: Handle commands on the app side¶ · In the Ionic app, go to src/app and open the app.component.ts file. · In...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found