EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'

Question

I\'m trying to lazy load Angular 2 modules with the router, and I\'m having this error:

error_handler.js:50 EXCEPTION: Uncaught (in promise): Error: C

Answer 1

I landed on this question with very similar symptoms and context, so it seems useful to remark that this answer to another question helped me out.

In my specific case, I was somewhat following the lazy feature modules docs, and I even faithfully tried to replicate the associated StackBlitz example code. For some reason that example gets away with:

loadChildren: 'app/customers/customers.module#CustomersModule'

And even though my Angular CLI (v6) based experiment had similar folder structure, I needed to do either this:

// Full path including `src` at the start:
loadChildren: 'src/app/customers/customers.module#CustomersModule'

or this:

// Relative path from the `app-routing.module.ts` file:
loadChildren: './customers/customers.module#CustomersModule'

No clue why the StackBlitz example gets away with the first code example, but the other two both make sense and work for me when doing ng serve.

Answer 2

You need to change your app-routing.module.ts in import { RouterModule } from '@angular/router';

const routes = [
 {path : '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
 {path: 'devis', loadChildren: () => import('./forms/forms.module').then(m => m.FormsModule) }
];

Answer 3

It seems that the angular-cli renderer has problems with lazy loading when you use export default class SomeModule { } ...along with a few other nuances.

This is what I did to resolve the same "Error: Cannot find module..." I was getting on Heroku deployment:

• Source all loadChildren paths from the app root & include a hash for your module name
  • loadChildren: 'app/main/some-module/some-module.module#SomeModule'
• Change export default class SomeModule { } to export class SomeModule { }

Answer 4

Use it like this

{
  path : 'company', 
  loadChildren: () => import('./company/company.module').then(m => m.CompanyModule)
},

Answer 5

I managed to make it work, here is what I done :

1 - Make the routing code in the module ( not a file )

2 - Make the module file in the parent directory of the component

3 - Delete the 'default' in the export like this

export DEFAULT class HomeModule { }

became

export class HomeModule { }

you can see that it works with beta 24 here : https://github.com/mauricedb/lazy-routes

I don't know what is happening !!!