Error: Cannot match any routes. URL Segment: 'tabs'

Question

I'm trying to create a tabs page layout for my ionic 4 app. After my configs and setup, I get the error Error: Cannot match any routes. URL Segment: 'tabs'

First of all, when I created a default starter using the tabs template, it doesn't work. The tab bar shows but it doesn't display the tab content. After days of research and testings, no luck yet. See what I currently have;

My Ionic Info

Ionic:
   ionic (Ionic CLI)             : 4.6.0 (C:\Users\Ken\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

System:

   NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

app-routing.module.ts

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

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule'
  },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' }
];

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

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: 'tab1',
              outlet: 'tab1',
              loadChildren: '../tab1/tab1.module#Tab1PageModule'
          },
          {
              path: 'tab2',
              outlet: 'tab3',
              loadChildren: '../tab2/tab2.module#Tab2PageModule'
          },
          {
              path: 'tab3',
              outlet: 'tab3',
              loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
      ]
  },
  {
      path: '',
      redirectTo: '/tabs/(one:one)'
  }
];


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

tabs.page.html

<ion-tabs>

  <!-- Tabs -->
  <ion-tab tab="tab1">
    <ion-router-outlet name="tab1"></ion-router-outlet>
  </ion-tab>

  <ion-tab tab="tab2">
    <ion-router-outlet name="tab2"></ion-router-outlet>
  </ion-tab>

  <ion-tab tab="tab3">
    <ion-router-outlet name="tab3"></ion-router-outlet>
  </ion-tab>

  <!-- Tab Buttons -->
  <ion-tab-bar slot="bottom">

    <ion-tab-button tab="tab1" href="/tabs/(tab1:tab1)">
      <ion-icon name="navigate"></ion-icon>
      <ion-label>tab1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2" href="/tabs/(tab2:tab2)">
      <ion-icon name="person"></ion-icon>
      <ion-label>tab2</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3" href="/tabs/(tab3:tab3)">
      <ion-icon name="bookmarks"></ion-icon>
      <ion-label>tab3</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

I expected this to load the contents of tab1 by default when I navigate to /tabs and then clicking on the tab2 icon should likewise show the contents on tab2page etc.. but I get the error above when I do ionic serve and then add /tabs to the url. Any help here would be greatly appreciated. Thanks in anticipation.

Answer 1

in tabs.router.module.ts

remove the path:'tabs' under routes:Routes then the code will be like this. I am pasting the code from my file

const routes: Routes = [   {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]   }, ];

in app-routing.module.ts the code will be like this

const routes: Routes = [    {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)   },   {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)   },      {
    path : '',
    redirectTo : 'login',
    pathMatch : 'full'   } ];

Answer 2

Replace these lines in tabs.router.module.ts

{
      path: '',
      redirectTo: '/tabs/tabs/(one:one)'
  }

You have to add '/tabs' before final redirect.

Answer 3

Well, I had to update the environment and then use the breaking changes guide to get my tab pages working. The following resources were very useful:

https://forum.ionicframework.com/t/how-to-update-ionic-4-project-to-latest-beta-release/140050/2 https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#angular-tabs

Now my Ionic Info looks like this:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (C:\Users\Ken\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

System:

   NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

And my package.json looks like this:

 "dependencies": {
    "@angular/common": "~7.1.4",
    "@angular/core": "~7.1.4",
    "@angular/forms": "~7.1.4",
    "@angular/http": "~7.1.4",
    "@angular/platform-browser": "~7.1.4",
    "@angular/platform-browser-dynamic": "~7.1.4",
    "@angular/router": "~7.1.4",
    "@ionic-native/core": "5.0.0-beta.21",
    "@ionic-native/splash-screen": "5.0.0-beta.21",
    "@ionic-native/status-bar": "5.0.0-beta.21",
    "@ionic/angular": "4.0.0-rc.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.11.4",
    "@angular-devkit/build-angular": "~0.11.4",
    "@angular-devkit/core": "~7.1.4",
    "@angular-devkit/schematics": "~7.1.4",
    "@angular/cli": "~7.1.4",
    "@angular/compiler": "~7.1.4",
    "@angular/compiler-cli": "~7.1.4",
    "@angular/language-service": "~7.1.4",
    "@ionic/angular-toolkit": "~1.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.12.0",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.12.0",
    "typescript": "3.1.6"
  }

Now the examples on the official Ionic 4 docs https://beta.ionicframework.com/ works as expected.