CODEWITHSUNDEEP
angularangular2-routinglazy-loadingionic4
saiy2k
saiy2k

Reputation: 1862

Ionic 4 / Angular Routing: ERROR Error: Uncaught (in promise): Error: Cannot find 'EventHomePageModule' in './home/home.module'

I am experimenting with Ionic 4 Beta 15, released yesterday.

Here is my AppRoutingModule

const routes: Routes            =   [{ 
    path                        :   '', 
    loadChildren                :   './tabs/tabs.module#TabsPageModule'
    /*
}, { 
    path                        :   'event/:id', 
    loadChildren                :   './event/event.module#EventModule'
}, { 
    path                        :   'ngo/:id', 
    loadChildren                :   './ngo/ngo.module#NgoModule'
    */
}, { 
    path                        :   'volunteer/:id', 
    loadChildren                :   './volunteer/volunteer.module#VolunteerModule'

}];

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

As given in above code, If I comment out any 2 of 3 paths, Event, Ngo or Volunteer, routing is working good.

But when I enable any of the 2 paths together, I am getting the following error:

Error: Cannot find 'NgoHomePageModule' in './home/home.module'
    at checkNotEmpty (core.js:5007)
    at core.js:4984
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:3820)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3811)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at checkNotEmpty (core.js:5007)

It happens randomly with NGO or with Volunteer on each ionic serve

Routing in my VolunteerModule

const routes = [{
    path                        :   'home',
    loadChildren                :   './home/home.module#VolunteerHomePageModule'
}, {
    path                        :   'event',
    loadChildren                :   './event/event.module#VolunteerEventPageModule'
}, {
    path                        :   'achievement',
    loadChildren                :   './achievement/achievement.module#VolunteerAchievementPageModule'
}, {
    path                        :   '',
    redirectTo                  :   'home'
}];

Routing in my NgoModule

const routes = [{
    path                        :   'home',
    loadChildren                :   './home/home.module#NgoHomePageModule'
}, {
    path                        :   'upcoming',
    loadChildren                :   './upcoming /upcoming.module#NgoUpcomingPageModule'
}, {
    path                        :   'past',
    loadChildren                :   './past/past.module#NgoPastPageModule'
}, {
    path                        :   'volunteer',
    loadChildren                :   './volunteer/volunteer.module#NgoVolunteerPageModule'
}, {
    path                        :   '',
    redirectTo                  :   'home'
}];

My Folder structure: 

▾ ngo/
  ▸ home/
  ▸ past/
  ▸ upcoming/
  ▸ volunteer/
    [  ]ngo.module.spec.ts
    [  ]ngo.module.ts
▸ tabs/
▾ volunteer/
  ▸ achievement/
  ▸ event/
  ▸ home/
    [  ]volunteer.module.spec.ts
    [  ]volunteer.module.ts
  [  ]app-routing.module.ts

Update 1: Uploaded the Repo to https://gitlab.com/saiy2k/ionic.4-beta.15-routing-issue

What am I doing wrong? Please help.

Upvotes: 0

Views: 1062

Answers (2)

Varun Sukheja
Varun Sukheja

Reputation: 6526

Faced the same issue but I just stopped ionic serve and re-executed it.

Upvotes: 1

saiy2k
saiy2k

Reputation: 1862

Made it work, but unbelievable solution.

Renamed the sub folders of the features with a unique name, as follows:

▾ ngo/
  ▸ home/ --> nhome/
  ▸ past/ --> npast/
  ▸ upcoming/ --> nupcoming/
  ▸ volunteer/ --> nvolunteer/
    [  ]ngo.module.spec.ts
    [  ]ngo.module.ts
▸ tabs/
▾ volunteer/
  ▸ achievement/ --> vachievement/
  ▸ event/ --> vevent/
  ▸ home/ --> vhome/
    [  ]volunteer.module.spec.ts
    [  ]volunteer.module.ts
  [  ]app-routing.module.ts

This change resolved the issue. But I dont understand why! Any explanation for this?

Pushed the same to https://gitlab.com/saiy2k/ionic.4-beta.15-routing-issue/tree/fix

Upvotes: 0

Related Questions