Ionic Redirect is not working, getting blanks instead of tabs layout app

Ionic Framework
1

Hi, Im new to Ionic framework development, going through the tutorials to learn same, Im facing the issue when redirecting the page, my Tabs Layout app is working fine but when i add code for redirect im getting blank screen app after reloading, below is the code please help on this, thanks.

i have added singe-item page in tabs page and trying to redirect to single-item page from tab1 page

1. tab1.page.html

<ion-header [translucent]=“true”>


Tab 1


<ion-content [fullscreen]=“true”>


Tab 1


REDIRECT TO SINGLE ITEM PAGE

2. app-routing.moduels.ts

import { NgModule } from ‘@angular/core’;
import { PreloadAllModules, RouterModule, Routes } from ‘@angular/router’;

// documentation for Angular Routing : Angular Navigation: How Routing & Redirects Work in Angular Apps

const routes: Routes = [
{ path: ‘’, redirectTo: ‘tabs’, pathMatch: ‘full’ },
{
path: ‘’,
loadChildren: () => import(‘./tabs/tabs.module’).then(m => m.TabsPageModule)
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}

3. tabs-routing.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’,
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’
}
]
},
{
path: ‘’,
redirectTo: ‘/tabs/tab1’,
pathMatch: ‘full’
},
{
path: ‘single-item’,
loadChildren: () => import(‘./single-item/single-item.module’).then( m => m.SingleItemPageModule)
}
];

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

1 Like