Cannot find module "path to feature module" when lazy loading

Ionic Framework ionic-v3
1

Ionic Lazy Loading Error

I’m encountering the following stacktrace error when I’m trying to configure Lazy Loading:

Error: Uncaught (in promise): Error: Cannot find module 'pages/home/home.module'.
Error: Cannot find module 'pages/home/home.module'.
    at http://localhost:8100/build/main.js:10:9
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:5134:33)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
    at r.run (http://localhost:8100/build/polyfills.js:3:10143)
    at http://localhost:8100/build/polyfills.js:3:20242
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5125:33)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:10834)
    at c (http://localhost:8100/build/polyfills.js:3:19752)
    at c (http://localhost:8100/build/polyfills.js:3:19461)
    at http://localhost:8100/build/polyfills.js:3:20233
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5125:33)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:10834)
    at o (http://localhost:8100/build/polyfills.js:3:7894)

Configuration

Ionic Framework: 3.9.2
Ionic App Scripts: 3.2.1
Angular Core: 5.2.11
Angular Compiler CLI: 5.2.11
Node: 10.12.0
OS Platform: macOS
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Code Snippets

Here are some of the files:

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    { path: 'home', loadChildren: "pages/home/home.module#HomePageModule" },
    { path: 'form', loadChildren: "pages/form/form.module#FormPageModule" },
    { path: '',  redirectTo: '/home',  pathMatch: 'full' }
];

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

export class AppRoutingModule { }

Things to note

  • On my app/app.module.ts, I already don’t import the modules to be lazy-loaded.
  • On my app/app.component.ts, I use a string reference to my HomePage module.
  • On my app/app-routing.module.ts, The routes use loadChildren that references the filepath to my modules.
  • App module uses RouterModule.forRoot while Feature modules in the pages folder use RouterModule.forChild.

Not sure what else to do here, I followed the instructions for lazy-loading on the ionic documentation and I read through Angular documentation for lazy-loading.

Questions

  1. How do I fix the “cannot find module” error? I know the files are there but Ionic/Angular isn’t able to find where the module files are.

  2. Do I actually need to have external dependencies like angular-router-loader to enable angular to load modules from string-based file path references?

Github Repository

To reproduce the bug, please check out the repository below:

I can’t provide a Stackblitz project of it because Stackblitz doesn’t currently support projects of this type:

https://stackblitz.com/github/darrensapalo/ionic-lazy-loading-error

2

Have you been able to find a solution for this problem? I am facing it as well and I need to demo to a client in 2 days (15/05/2019) :expressionless:

3

Sadly, I opted not to use lazy loading.

Alternatively, if you’re starting on a new project, I recommend using a higher version of ionic (v4 maybe?) rather than ionic v3.

4

Thanks for the reply :slight_smile: . I ended up starting the project over and just copying the code from the old project to the new project and everything worked just fine.

“I recommend using a higher version of ionic (v4 maybe?) rather than ionic v3.” - I was using Ionic 4 all along.

1 Like