Ionic 4 Error "Uncaught (in promise): Error: Cannot find module '../home/home.module/'

Viewed 2604

I have been rewriting my app in Ionic 4 for a bit and recently upgraded my @ionic/angular package to 4.0.0-rc.0. I am having trouble rewriting my Angular routing to the new way introduced in 4.0.0-beta.18 (https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#angular-tabs).

I am receiving this error in my javascript console:

ERROR Error: "Uncaught (in promise): Error: Cannot find module '../home/home.module/'
webpackAsyncContext/<@http://localhost:8100/main.js:897:12
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:8100/polyfills.js:2710:17
onInvoke@http://localhost:8100/vendor.js:34941:24
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:8100/polyfills.js:2709:17
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run@http://localhost:8100/polyfills.js:2460:24
scheduleResolveOrReject/<@http://localhost:8100/polyfills.js:3194:29
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:8100/polyfills.js:2743:17
onInvokeTask@http://localhost:8100/vendor.js:34932:24
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:8100/polyfills.js:2742:17
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask@http://localhost:8100/polyfills.js:2510:28
drainMicroTaskQueue@http://localhost:8100/polyfills.js:2917:25
"
    resolvePromise http://localhost:8100/polyfills.js:3136:31
    resolvePromise http://localhost:8100/polyfills.js:3093:17
    scheduleResolveOrReject http://localhost:8100/polyfills.js:3195:17
    invokeTask http://localhost:8100/polyfills.js:2743:17
    onInvokeTask http://localhost:8100/vendor.js:34932:24
    invokeTask http://localhost:8100/polyfills.js:2742:17
    runTask http://localhost:8100/polyfills.js:2510:28
    drainMicroTaskQueue http://localhost:8100/polyfills.js:2917:25

And this is how I am currently setting up my routing:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [
            {
                path: '',
                loadChildren: '../home/home.module/#HomePageModule'
            }
        ]
      },
      {
          path: 'add',
          children: [
              {
                  path: 'add',
                  loadChildren: '../add/add.module/#AddPageModule'
              }
          ]
      },
        {
            path: 'settings',
            children: [
                {
                    path: 'settings',
                    loadChildren: '../settings/settings.module/#SettingsPageModule'
                }
            ]
        }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  }
];

And this is my folder structure: Folder Structure

I am currently stumped and need some help.

1 Answers

You can also resolve the issue by changing the routes from

loadChildren: '../add/add.module#AddPageModule'

to

loadChildren: () => import('add/add.module').then( m => m.AddPageModule)  

Remember to take care of the folder locations!

Related