I’ve been trying to figure out how to allow navigation in one of my tabs, and I feel like I’m really close. Here is my tab view routes:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { TabbedEventPage } from './tabbed-event.page';
import { Config } from '../util/Config';
const routes: Routes = [
{
path: 'tabs',
component: TabbedEventPage,
children: [
{
path: '',
redirectTo: '/tabs/elementGroupTab',
pathMatch: 'full'
},
{
path: 'elementGroupTab',
loadChildren: '../element-groups/element-groups.module#ElementGroupsPageModule',
children: [
{
path: '',
loadChildren: '../element-groups/element-groups.module#ElementGroupsPageModule'
},
{
path: 'element-list',
loadChildren: '../element-list/element-list.module#ElementListPageModule'
}
]
},
{
path: 'searchTab',
loadChildren: '../event-search/event-search.module#EventSearchPageModule'
},
{
path: 'favoritesTab',
loadChildren: '../favorites/favorites.module#FavoritesPageModule'
}
]
},
{
path: '',
redirectTo: '/routine/tabbed-event/tabs/elementGroupTab',
pathMatch: 'full'
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [TabbedEventPage]
})
export class TabbedEventPageModule {}
My goal is to be able to navigate to a route within the first tab. My first tab is called 'elementGroupTab and I want to navigate to a subroute called ‘element-list’. As you can see above, ‘elementGroupTab’ has a child path defined called ‘element-list’. The problem I have is that when I navigate to the route I get the following error:
ERROR Error: Uncaught (in promise): Error: Cannot find module '../element-list/element-list.module'
I don’t understand why because my ElementListPageModule is defined in the same way that ElementGroupsPageModule is defined (which loads fine) and they reside in the same folder. Here is my element-list.module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { ElementListPage } from './element-list.page';
const routes: Routes = [
{
path: '',
component: ElementListPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ElementListPage]
})
export class ElementListPageModule {}
For some reason, the element-groups page loads correctly but the element-list page can’t be found. Please help! Here is my page folder structure:
/src
/app
/element-groups
/element-list
...