Ionic 4/Angular Router - how to route to a tab via a button/item?

ThomasLohmann · 2018-07-31 21:02:52 UTC

Hi everyone,

how is it possible to route to lazy loaded tabs via an ion-item? I created just the ionic 4 starter tabs template with one tab as a menu (called maintabs). Within the menu tab I have an ion-item which should open another tabs (called consumer-tabs). When clicking this item, nothing happens and the new route as well as the consumer tabs are not shown.

Does anyone have a solution?

Kind regards,
Thomas

Screenshot:

Bildschirmfoto%20vom%202018-06-07%2011-43-59

Here is my code:

App Routing:

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

const routes: Routes = [
  { path: '', loadChildren: './pages/maintabs/maintabs.module#MaintabsModule' },
  { path: '', loadChildren: './pages/consumer/tabs/consumer-tabs.module#ConsumerTabsModule' }
];

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

export class AppRoutingModule { }

Maintabs Routing:

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

import { MaintabsPage } from './maintabs.page';
import { MenuPage } from '../menu/menu.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: MaintabsPage,
    children: [
      {
        path: 'menu',
        outlet: 'menu',
        component: MenuPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(menu:menu)',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: '/tabs/(menu:menu)',
    pathMatch: 'full'
  }
];

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

Maintabs html:

<ion-tabs tabbarPlacement="top">
  <ion-tab label="Home" icon="menu" href="/tabs/(menu:menu)">
    <ion-router-outlet name="menu"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Consumer Routing:

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

import { ConsumerTabsPage } from './consumer-tabs.page';
import { ConsumerHomeListPage } from '../homepage/consumer-home-list/consumer-home-list.page';

const routes: Routes = [
  {
    path: 'consumer',
    component: ConsumerTabsPage,
    children: [
      {
        path: 'homepage',
        outlet: 'homepage',
        component: ConsumerHomeListPage
      }
    ]
  }
];

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

ConsumerTabs html:

<ion-tabs tabbarPlacement="top">
  <ion-tab label="Homepage" icon="menu" href="/consumer/(homepage:homepage)">
    <ion-router-outlet name="homepage"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Menu html:

<ion-content>
  <ion-card>
    <ion-item button class="cursor" href="/consumer/(homepage:homepage)">
      <ion-avatar slot="start">
        <img src="assets/images/Michael.jpg">
      </ion-avatar>
      <ion-label>
        <h2 class="text-bolder">Michael Baßler</h2>
        <p>@MichaelBaßler</p>
        <p>100,000 Followers</p>
      </ion-label>
    </ion-item>
  </ion-card>
</ion-content>

izio38 · 2018-06-07 10:29:25 UTC

I’m sorry, I can’t help you on it but… How did you installed ionic 4? Because I used the @canary tag from npm, but It seems it doesn’t install Angular 6 with it…

ThomasLohmann · 2018-06-07 10:37:34 UTC

Have a look here:

AlGantori · 2018-07-11 00:36:55 UTC

That article fails to give the basic instructions to actually install anything. It says “…Ionic 4 Alpha is floating there somewhere…”.

I am on 3.x, what do I need to execute from the CLI to install anything Ionic 4.x ?
According to this link

github.com

ionic-team/ionic/blob/v4.0.0-alpha.8/CHANGELOG.md

<a name="4.0.0-alpha.8"></a>
# [4.0.0-alpha.8](https://github.com/ionic-team/ionic/compare/v4.0.0-alpha.7...v4.0.0-alpha.8) (2018-07-09)


### Bug Fixes

* **angular:** avoid TS 2.8 features ([c736bac](https://github.com/ionic-team/ionic/commit/c736bac))
* **angular:** correct subscription to cordova ready event ([#14577](https://github.com/ionic-team/ionic/issues/14577)) ([5967352](https://github.com/ionic-team/ionic/commit/5967352))
* **bundling:** fix EventEmitter import ([8e47101](https://github.com/ionic-team/ionic/commit/8e47101))
* linting ([e629e29](https://github.com/ionic-team/ionic/commit/e629e29))
* **icon:** target element for style and add to breaking ([949d93e](https://github.com/ionic-team/ionic/commit/949d93e))
* **overlay:** make type an any ([15dc651](https://github.com/ionic-team/ionic/commit/15dc651))
* **router:** fix reuse strategy ([bd53bba](https://github.com/ionic-team/ionic/commit/bd53bba))
* **scripts:** update github release notes ([fc078af](https://github.com/ionic-team/ionic/commit/fc078af))
* **tabs:** align tab title and icons to flex-start ([c11d74b](https://github.com/ionic-team/ionic/commit/c11d74b)), closes [#14606](https://github.com/ionic-team/ionic/issues/14606)


### Features

* **all:** custom icons ([e6638e7](https://github.com/ionic-team/ionic/commit/e6638e7))

This file has been truncated. show original

“v4.0.0-alpha.8” is somehow accessible??

Thank you.

wibastidas · 2018-07-31 14:30:39 UTC

Ionic 4 beta requires the --type=angular flag and version 4.0.0 or greater of the CLI.

Install the Ionic CLI globally with npm:
npm install -g ionic

The three most common starters are the blank starter, tabs starter, and sidemenu starter. Get started with the ionic start command:
ionic start myApp tabs --type=angular

rapropos · 2018-07-31 19:55:21 UTC

I think this is a bad UI. Tabs are for allowing the user to switch between unrelated subworlds of an app, and as such all navigation activity in the body of a tab should only change what is going on in that specific tab. The only way the app should move from tab A to tab B is when the user chooses tab B explicitly, not via any buttons in the body of a page.

ThomasLohmann · 2018-08-01 15:37:38 UTC

That’s not right. Have a look at Facebook or Youtube App. If you click a profile tabs will open e.g. homepage, photos, videos etc. That’s what I want. In other words, it would be nice to know how to implement nested tabs with Angular routing.

xyz70 · 2018-08-06 23:21:15 UTC

Hey Thomas, I’m having the same issue and was wondering if you found a working way to do this?

Thank you!

Tommertom · 2018-08-06 23:23:59 UTC

Use routes to navigate to the page containing the tabs definition and apply id to feed tab reference to tabs

Use tabs.select() method to select the appropriate tab to display

What I would try looking at the docs

No coded example

Tom

xyz70 · 2018-08-07 22:33:59 UTC

I really would love to fix this problem, and there’s nothing in the docs about navigating from a page to a tabbed UI.

I basically want to navigate from a language selection page to the tabbed UI.

Any help would be really appreciated.

mypage.page.html (my homepage, I want to navigate from here to the tabbed UI)

<ion-content padding>
      <ion-button routerLink="tabs" routerDirection="forward"> Go to tabs </ion-button>
</ion-content>

app-routing.module.ts:

const routes: Routes = [
  { path: '', loadChildren: './select-language/select-language.module#SelectLanguagePageModule' },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
];

Error I get:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tabs'
Error: Cannot match any routes. URL Segment: 'tabs'

jhavinay · 2018-08-08 07:37:12 UTC

AppRouting seems to be problem. Router will be confused will module to load for path “”.
Try changing it to
approuting:
const routes: Routes = [ { path: 'tabs', loadChildren: './pages/maintabs/maintabs.module#MaintabsModule' }, { path: 'consumer', loadChildren: './pages/consumer/tabs/consumer-tabs.module#ConsumerTabsModule' } ];

maintabs routing

const routes: Routes = [
  {
    path: '',
component: MaintabsPage,
    children: [
...
...

Consumer Routing:

const routes: Routes = [
  {
    path: 'consumer',
    component: ConsumerTabsPage,
    children: [
...
...

jhavinay · 2018-08-08 07:39:59 UTC

Can you share routing of TabsPageModule?
it should have a path of “” and then children’s defined.

conexcol · 2018-09-20 17:02:59 UTC

Have you found the solution?. I’m also having this issue with Ionic 4 + Angular 6

Trying to link to a tabbed page from a menu link.

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

ThomasLohmann · 2018-09-21 10:14:17 UTC

No, I didn’t find a solution. It can’t be that hard to navigate via a button to new Tabs. I think the whole Ionic Tabs Module with all this outlets are a bit crazy and not easy.

dniemuth · 2018-09-26 17:52:31 UTC

I’ve been having the same issue. I was able to get tabs to work “correctly” if I had it set as the default route. I can navigate to a standard page, and navigate back to the tab page. Thinking about making some janky hack where it loads the tab page, does some form of validation check to determine what page to be on, then navigate to that page.

I’ll be keeping my eye on this thread to see if anyone figures out how to navigate to a tabs page.

Xiwi · 2018-09-26 18:37:58 UTC

This is not the only issue I had with Ionic 4. Tbh I’ll move back again to Ionic 3 and I’ll wait for a release

WIllBr · 2018-09-30 05:28:53 UTC

Same problem there! Any solution?

lukashronec · 2018-10-23 20:31:03 UTC

It is actually working for me. I am using ionic angular 4 beta 13. The only thing is that only ion-item and ion-button can bu used.

maheshsonu · 2018-12-05 13:16:54 UTC

use similar way:
In app-routing.module.ts:
const routes: Routes = [
{ path: ‘tab’, loadChildren: ‘./tabs/tabs.module#TabsPageModule’ },
{ path: ‘’, loadChildren: ‘./login/login.module#LoginPageModule’ }
];

place include tab path and then load the tab module on button click:
<ion-button size=“small” href="**tab/**tabs/(home:home)>Click here

I hope, now problems will solve. Happy coding
Thanks

indrasaswita · 2018-12-16 07:59:11 UTC

Hello Thomas,
I think u have a mistake on tab.router.module.ts, need to remove the path: '', segments on your code, in my code, will be like this… i just try to configure the ionic 4 default code…

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      /*{
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },*/
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  }/*,
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }*/
];

and you can call this page from another typescript code like this,

this.router.navigateByUrl('tabs');

i hope this can help u and others… thanks.