How to solve Error: cannot find module in Ionic 4 (tabs navigation post login)

Ionic Framework
1

Hey, I’m new to ionic and currently doing my project. Tabs worked fine at first but I got an error after trying to navigate it after login. Not sure what i’m doing wrong :pensive: any help would be appreciated, thanks.

Error
ERROR Error: Uncaught (in promise): Error: Cannot find module ‘…/pages/tab1/tab1.module’
Error: Cannot find module ‘…/pages/tab1/tab1.module’
at $_lazy_route_resource lazy namespace object:35
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.js:17299)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at zone.js:889
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
defaultErrorLogger @ core.js:15724
push…/node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15772
next @ core.js:17771
schedulerFn @ core.js:13515
push…/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push…/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push…/node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push…/node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13499
(anonymous) @ core.js:17321
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push…/node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push…/node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17258
onHandleError @ core.js:17321
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
push…/node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:164
_loop_1 @ zone.js:694
api.microtaskDrainDone @ zone.js:703
drainMicroTaskQueue @ zone.js:608
Promise.then (async)
scheduleMicroTask @ zone.js:584
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
onScheduleTask @ zone.js:301
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push…/node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push…/node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
resolvePromise @ zone.js:825
(anonymous) @ zone.js:741
webpackJsonpCallback @ bootstrap:25
(anonymous) @ pages-tabs-tabs-module.js:1

app-routing.module.ts
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;

const routes: Routes = [
{ path: ‘’, redirectTo: ‘tabs’, pathMatch: ‘full’ },
{ path: ‘login’, loadChildren: ‘./login/login.module#LoginPageModule’ },
{ path: ‘register’, loadChildren: ‘./register/register.module#RegisterPageModule’ },
{ path: ‘tabs’, loadChildren: ‘./pages/tabs/tabs.module#TabsPageModule’ },
{ path: ‘childdetails’, loadChildren: ‘./pages.childdetails.module#ChilddetailsPageModule’ },
];

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

tabs.router.module.ts
import { RouterModule, Routes} from ‘@angular/router’;
import { NgModule } from ‘@angular/core’;
import { TabsPage } from ‘./tabs.page’;

const routes: Routes = [
{
path: ‘’, //default
component: TabsPage, //localhost/tabs/…
children: [
{ path: ‘tab1’, loadChildren: ‘…/pages/tab1/tab1.module#Tab1PageModule’ },
{ path: ‘tab2’, loadChildren: ‘…/pages/tab2/tab2.module#Tab2PageModule’ },
{ path: ‘tab3’, loadChildren: ‘…/pages/tab3/tab3.module#Tab3PageModule’ },
]

},

];

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

tabs.module.ts
import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { FormsModule } from ‘@angular/forms’;

import { IonicModule } from ‘@ionic/angular’;

import { TabsPage } from ‘./tabs.page’;
import { TabsRoutingModule } from ‘./tabs.router.module’;

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
TabsRoutingModule
],
declarations: [TabsPage]
})
export class TabsPageModule {}

other code, here is the repo https://github.com/Lilly08/Llly

1 Like
2

For your routes, try like this:

loadChildren: ‘../tab1/tab1.module#Tab1PageModule’

Or:

loadChildren: ‘../pages/tab1/tab1.module#Tab1PageModule’

Personnaly, in my app, it’s like this:

loadChildren: ‘./tab1/tab1.module#Tab1PageModule’
1 Like
3

here is the solution
I have been facing same problem and found the right solution

in tabs.module.ts file

add this

const routes: Routes = [
{
path: ‘’,
component: TabsPage,
children: [
{path: ‘tab1’, component:Tab1Page },
{ path: ‘tab2’, component:Tab2Page },
{ path: ‘tab3’, component:Tab3Page },
{
path: ‘’,
redirectTo: ‘/tabs/tab1’,
pathMatch: ‘full’
}
]
},
{
path: ‘’,
redirectTo: ‘/tabs/tab1’,
pathMatch: ‘full’
}
];

@NgModule({
declarations: [TabsPage,Tab1Page,Tab2Page
,Tab3Page]
})

it is working fine

4

Thank you so much you solved my problem :smiley:

1 Like
5

I’m having a similar issue with a sub-tab not being displayed but I’m getting strange behavior at runtime. The first load after running ionic serve will display

ERROR Error: Uncaught (in promise): Error: Cannot find module ‘../tab1/detail/detail.module'
Error: Cannot find module ‘../tab1/detail/detail.module’

But if I navigate to the tabs.routing.ts file and delete the path, save and then add the same exact path back and save the app will compile and run and navigate correctly. It literally just requires me to delete/un-delete the path and will run the 2nd time without any changes.

Obviously I don’t want to have to make an edit at runtime to get it to work. Does anyone know what the issue might be causing this?