Ionic 4 ion-tabs - ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment:

Question

My app-routing.module.ts:

  {
    path: 'conversation-tabs',
    children: [
      {
        path: 'conv-conversation',
        children: [
          {
            path: '',
            loadChildren:
              '/conv-conversation.module#ConvConversationPageModule',
          }
        ]
      },
      {
        path: 'conversation-files',
        children: [
          {
            path: '',
            loadChildren:
              '/conversation-files.module#ConversationFilesPageModule',
          }
        ]
      },
      {
        path: '',
        redirectTo: '/conversation-tabs/conv-conversation',
        pathMatch: 'full'
      }
    ]
  }

HTML in conv-conversation.html:

<ion-toolbar>
  <ion-tabs>
      <ion-tab-bar slot="bottom" color="light">
          <ion-tab-button tab="conv-conversation">
              <ion-icon name="text"></ion-icon>
              <ion-label>Messages</ion-label>
              <ion-badge>{{ unreadMsgs }}</ion-badge>
          </ion-tab-button>

          <ion-tab-button tab="conversation-files">
              <ion-icon name="folder"></ion-icon>
              <ion-label>Files</ion-label>
          </ion-tab-button>
      </ion-tab-bar>
  </ion-tabs>

This is how my process works:

Login -> Home -> Pick Conversation (contains button to go to conversation-tabs)

conversation-tabs redirects to conv-conversation which is going to act as the 'home' for my tabs. At the bottom of conv-conversation.html is the HTML code above. When I click the conversation-files button, I get this error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'conversation-tabs/conv-conversation/conversation-files' Error: Cannot match any routes. URL Segment: 'conversation-tabs/conv-conversation/conversation-files'

I'm not really sure what the issue is since my routing is set. Am I missing something?

Answer 1

Your link that leads to conversation-files is not set correctly, because it apparently appends the path instead of replacing it. I believe you haven't correctly set up you component structure. You need to have a ConversationTabsPage (name it as you like) component at your path: 'conversation-tabs' and then put your tab buttons there:

<ion-toolbar>
  <ion-tabs>
      <ion-tab-bar slot="bottom" color="light">
          <ion-tab-button tab="conv-conversation">
              <ion-icon name="text"></ion-icon>
              <ion-label>Messages</ion-label>
              <ion-badge>{{ unreadMsgs }}</ion-badge>
          </ion-tab-button>

          <ion-tab-button tab="conversation-files">
              <ion-icon name="folder"></ion-icon>
              <ion-label>Files</ion-label>
          </ion-tab-button>
      </ion-tab-bar>
  </ion-tabs>
</ion-toolbar>

so in your app-routing.module.ts you would have next:

{
    path: 'conversation-tabs',
    component: ConversationTabsPage,
    children: [
      {
        path: 'conv-conversation',
        children: [
          {
            path: '',
            loadChildren:
              '/conv-conversation.module#ConvConversationPageModule',
          }
        ]
      },
      {
        path: 'conversation-files',
        children: [
          {
            path: '',
            loadChildren:
              '/conversation-files.module#ConversationFilesPageModule',
          }
        ]
      },
      {
        path: '',
        redirectTo: '/conversation-tabs/conv-conversation',
        pathMatch: 'full'
      }
    ]
  }

Also remove tab buttons from your conv-conversation.html. I referred to this stack blitz.

EDIT: I've created another stack blitz for your specific use case where it works. The reason why it was showing blank content when routing was working was because your ion-tabs were wrapped in ion-toolbar.