Cannot match any routes. URL Segment: 'tabs'

Ionic Framework
1

Ionic Info:

ionic (Ionic CLI) : 4.1.2 (/usr/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.2
@angular-devkit/core : 0.7.3
@angular-devkit/schematics : 0.7.3
@angular/cli : 6.1.3
@ionic/ng-toolkit : 1.0.6
@ionic/schematics-angular : 1.0.4

System:

NodeJS : v8.12.0 (/usr/bin/node)
npm : 6.4.1
OS : Linux 4.15

I’m a beginner with Ionic 4. So I’m facing some routing related issue in my app. Firstly I’ve created the app with side menu and tabs too. I want to show some pages before the tabs page so I do some changes in app-routing.module.ts.

const routes: Routes = [
  { path: '', loadChildren: './pages/splash/splash.module#SplashPageModule' },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
  { path: 'about', loadChildren: './about/about.module#AboutPageModule' },
];

I want to show first my splash page then login & after success login pass to tabs page but at the login page, first of all, I’m not able to use NavController & there methods like goForward, setRoot. At the login page :

    <ion-button margin-top shape="round" color="primary" routerDirection='root' routerLink='/tabs'>Login with Facebook</ion-button>

On Click app through error

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘tabs’
Error: Cannot match any routes. URL Segment: ‘tabs’…

2

1/ your @ionic/angular 4.0.0-beta.2 is out of date…you should keep up with the latests versions
2/ did you have a look at [https://www.joshmorony.com/using-angular-routing-with-ionic-4/]?

3

Perhaps a really outdated reply, but just faced this issue and solved it by checking my tab.router definitions.
If the app.rpouter already defines a path for your tabs, inside your tab.router the default path should be ‘’ (blank, empty string), otherwise you’ll be referring to a /tab/tab route and your /tab segment won be found.

11 Likes
4

I am facing exactly the same problem if you solved what worked

5

set path=’ ’ in app-routing.module.ts

{ path: ’ ', loadChildren: ‘./tabs/tabs.module#TabsPageModule’ }

it works for me

4 Likes
6

I am also facing this same problem. I am using the tabs template.

7

It works for me to, so simple and good

9

Thanks, this helped me

10

Thanks a lot. That’s been of great help.