Angular 6 RouterLink With Tabs

Question

I have a Angular 6 / Ionic 4 lazy load tabs template that works correctly. The main page has one router-outlet and the tabs have secondary named router-outlets. However, I cannot create a routerLink in the main menu that displays a tab page.

This routerLink works only if NOT already on a tab page. e.g.

If on test page: /test
Click link
Correctly links to: tabs/(about:about)

Link to tab page

If already on the home tab (and click the link) the final url is:

/tabs/(about:about//home:home)

How do I create a routerLink that always links to the following?

/tabs/(about:about)

I get the same behavior with this typescript:

this.router.navigate(['/tabs', { outlets: { about: ['about']}}]);

However, this typescript works correctly:

this.router.navigateByUrl('/tabs/(about:about)');

app.component.html

<ion-app>
  <nav>
    <a [routerLink]="['/tabs', { outlets: { about: 'about' } }]">
      This link only works if NOT already on tab page.
    </a>
    <ion-button (click)="navigateByUrl()">This always works!</ion-button>
  </nav>
<router-outlet></router-outlet>
</ion-app>

app-routing.module.ts

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

const routes: Routes = [
  { path: '', loadChildren: './pages/tabs/tabs.module#TabsPageModule' },
  { path: 'test', loadChildren: './pages/test/test.module#TestPageModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true } )],
  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';
import { HomePage } from '../home/home.page';
import { AboutPage } from '../about/about.page';
import { ContactPage } from '../contact/contact.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        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'
  }
];

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

Can you create a sample in plnkr.co/edit/?p=catalogue to understand your issue correctly — Jeba Prince
which version of ionic framework do you use, ionic 3 or ionic 4? — zhimin

Santosh Kadam Santosh Kadam · Accepted Answer · 2019-12-27T05:20:21

In your index.html you should add below line.

<base href="/">

heref part may have different value depending on your root URL.

Now in your routing configuration write route configuration like below.

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

Angular 6 RouterLink With Tabs

2 Answers