1

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?

J.Do
  • 303
  • 6
  • 26

1 Answers1

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.

Blind Despair
  • 3,190
  • 2
  • 20
  • 31
  • This doesn't seem to make a difference – J.Do Feb 10 '20 at 08:44
  • Nope. No errors this time. It just doesn't change page/tabs – J.Do Feb 10 '20 at 09:48
  • So there is difference... I changed my answer a bit, can you please try it? – Blind Despair Feb 10 '20 at 10:09
  • Yes. My bad. I was looking at something else. I've just tried out your new answer. It does redirect to the "files" tab but this error still appears: `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'` – J.Do Feb 10 '20 at 10:16
  • When it's on the "files" tab, the "messages" tab does not work and I get this error: `ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'conversation-tabs/conversation-files/conv-conversation' Error: Cannot match any routes. URL Segment: 'conversation-tabs/conversation-files/conv-conversation` – J.Do Feb 10 '20 at 10:17
  • From the error I can see that it still constructs wrong url... I suggest switching back to old solution and subscribing to routerEvents somewhere and log what happens there. Jus to see if changing clicking tab triggers navigation. Like this `router.events.subscribe((event) => console.log(event))`. Then you can see if it triggered navigation and if yes, where it got cancelled. – Blind Despair Feb 10 '20 at 10:26
  • ok, I see what you did wrong, I am gonna updated my answer, please try it then – Blind Despair Feb 10 '20 at 10:36
  • Are you saying to move the tab buttons to `conversation-tabs.html`? I do have a `ConversationTabsPage` which is `conversation-tabs` – J.Do Feb 10 '20 at 10:48
  • Yes, but you also have to reference it in router like how I defined it in the answer. – Blind Despair Feb 10 '20 at 10:49
  • Adding the component to `app-routing.module.ts` causes this error: `ERROR in Could not resolve module /conv-conversation.module relative to src\app\app-routing.module.ts` – J.Do Feb 10 '20 at 11:13
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/207525/discussion-between-blind-despair-and-j-do). – Blind Despair Feb 10 '20 at 11:14